＃idnameを使用してすべてを選択しても、すべてのIDが変更されないのはなぜですか？

Question

私は一般的にコーディングに全く新しいです。私は、HTML、CSS、JavaScriptの基本から始めました。二つ目にはない

<script type="text/JavaScript"> 
    $('#title1').html('Changed!'); 
</script> 

：最初の1が自動的によって変更されますものの

<p id="title1">Change this</p> 
<p id="title1"> Change this too! </p> 

：

は、私は2つの段落を持っています。しかし、それはしないでください？ #title1はすべて変更されていますか？

私はonclickバージョンで同じ問題があります。最初の段落はクリックすると変更され、2番目の段落は変更されません。

<p id="title3" onclick="sayGoodbye();">Toggle this Hello - Goodbye</p> 
<p id="title3" onclick="sayGoodbye();">Thing to click on</p> 

<script type="text/javascript"> 
    function sayGoodbye(){ 
     $("#title3").html('Goodbye'); 
     $("#title3").click(function(){ 
      $("#title3").html("Hello again!"); 
      $("#title3").off("click"); 
     }); 
    } 
</script> 

Answer 1

idで要素を選択すると、1つの要素にidを1つだけ使用することになっているため、最初の要素のみが選択されます。各IDはページ上で一度だけ使用する必要があります！

何かの要素をまとめて取得する必要がある場合は、クラスごとに行う必要があります。

$(".title1").html("Changed!");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="title1">Change this</p> 
 
<p class="title1"> Change this too! </p>

Answer 2

ID属性は、各HTMLタグに対して一意である必要があります。 class属性を使用して、複数のタグに作用させることができます。

Answer 3

• id属性は、少なくとも同じレベルの子ツリーで一意である必要があります。
• 代わりにclassを使用し、を$(this)で聞くと、 が現在クリックされています。
• onclick属性を使用して関数を呼び出す場合は、thisのようなonclick="sayGoodbye(this);"を使用して、それに要素を渡します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="title3" onclick="sayGoodbye(this);">Toggle this Hello - Goodbye</p> 
 
<p class="title3" onclick="sayGoodbye(this);">Thing to click on</p> 
 

 
<script type="text/javascript"> 
 
    function sayGoodbye(t){ 
 
     $(t).html('Goodbye'); 
 
     $(t).click(function(){ 
 
      $(this).html("Hello again!"); 
 
      $(this).off("click"); 
 
     }); 
 
    } 
 
</script>