2016-03-26 9 views
-2

pタグのテキストを変更して、属性クラスによって設定されたプロパティを(テキストをクリックして)取得したいとします。ここでpタグのテキストを変更する

はHTMLです:

<p onclick="function">Hello</p> 

はCSS:

.attribution{ 
color:blue; 
font-weight:bold; 
} 

Javascriptを:

var main = function() { 
$('<p>').text('.attribution'); 
}; 
$(document).ready(main); 

ありがとうございました!

答えて

0

いいえ、JQueryをロードすると、なぜクリックイベントを処理してCSSプロパティを変更するのかがわかりません。

$("p").on("click", function() { 
 
    $(this).addClass('attribution'); 
 
});

2
<p onclick="function">Hello</p> 

ます:

  1. は、関数の名前ではなく、新しい関数を作成し、キーワードfunctionを使用する必要があります。
  2. ()を変数名に追加して実際に関数を呼び出す必要があります。
  3. 組み込みイベント属性をまったく使用しないでください。 JavaScriptを使用してイベントハンドラをバインドします。

ので

<p>Hello</p> 

<script> 
    $("p").on("click", main); 
</script> 
var main = function() { 
$('<p>').text('.attribution'); 
}; 
$(document).ready(main); 

ます:

  1. (それはデバッガとうまく演じているので)
  2. は、既存のを選択する必要が関数の宣言を使用すべき段落を作成する代わりに
  3. )新しいものを(そして速やかに破棄)要素上のクラスにattributionを追加代わりに、あなたはそれがときに呼び出されるにしたいときのフレーズ".attribution"
  4. でそれのテキストコンテンツを交換する準備ができてDOMに関数を呼び出していません何かはさておき、段落がインタラクティブになるように設計されていないよう

このような

function main() { 
    $('p').addClass('attribution'); 
}; 

をクリックします。あなたがの場合マウスポインタでそれらをクリックすると、人々はそうすることを奨励するものではなく、彼らは通常のフォーカスリストの外にいるので(マウスを使用しない人はタブすることができません)、表示されませんクリックしなければならないものとしてスクリーンリーダーに表示されます。適切なマークアップ(たぶんボタン)を使用してください。

+0

「固有」?彼らは「インライン」と呼ばれていませんか? – Xufox

+0

@Xufox - "インライン"は、外部リソースからリンクされていないスクリプトです。 – Quentin

+0

@クエンティンねえ、私はそれを試みたが、うまくいきませんでした。これは私がテキストエディタ[ブラケット]を使用しているために、javascriptが適用されない可能性がありますか? – tombros

0

1)実際にコールバック関数をonclickイベントにフックしているわけではありません。クリックするとどの機能を実行するかを指定する必要があります。 ので: HTML:

<p onclick="addClass(event)">Hello</p> 

はJavaScript:

function addClass(evt){ 
     evt.target.classList.add('attribution'); 
    } 

jQueryの代替:

var main = function(){ 
    $("p").click(function(){ 
     $(this).addClass("attribution"); 
    }); 
} 
$(document).ready(function(){ 
    main(); 
}); 
関連する問題