if文の比較から値/解決策を得る

Question

ifの文でIDの一致を確認しているが、A要素と同じIDを持つB要素を検出したい彼にクラスを与えなさい。このスクリプトで問題を見ることができます：

jQuery('.button').click(function() { 
 
    var a = jQuery('.a').attr('id') 
 
    var b = jQuery('.b').attr('id') 
 

 
    if (a === b) { 
 

 
    // "jQuery(this)" should be the detectet B-element, which has the same "id" as A 
 
    // ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 
 
    jQuery(this).addClass("active"); 
 
    jQuery(this).css("background", "red"); 
 

 
    // But it detects the button as "jQuery(this)" 
 

 
    } else { 
 
    return; 
 
    } 
 
});

.a, 
 
.b, 
 
.c { 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 1em; 
 
    background: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" class="button">Button</a> 
 
<div class="a" id="block">A</div> 
 
<div class="b" id="block">B</div> 
 
<div class="c" id="notblock">C</div>

感謝を助けるため！

Answer 1

jQuery('.button').click(function() { 
    var a = jQuery('.a').attr('id') 
    var b = jQuery('.b').attr('id') 
    if (a === b) { 
      // "jQuery(this)" should be the detectet B-element, which has the same "id" as A 
      // ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 
      jQuery('.b').addClass("active"); 
      jQuery('.b').css("background", "red"); 
      // But it detects the button as "jQuery(this)" 
    } 
    else { 
     return; 
    } 
}); 

クラスを要素に追加します。

Answer 2

はこれを試してください：あなたは、B要素のjQueryオブジェクトを取得する必要があり、ここではjQueryの（この）あなたはここで

jQuery('.button').click(function() { 
 
    var a = jQuery('.a').attr('id'); 
 
    var $belement = jQuery('.b'); 
 
    var b = $belement.attr('id') 
 

 
    if (a === b) { 
 
      
 
      // "jQuery(this)" should be the detectet B-element, which has the same "id" as A 
 
      // ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 
 
      $belement.addClass("active"); 
 
      $belement.css("background", "red"); 
 
      
 
      // But it detects the button as "jQuery(this)" 
 

 
    } 
 
    else { 
 
     return; 
 
    } 
 
});

.a, .b, .c { 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 1em; 
 
    background: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" class="button">Button</a> 
 
<div class="a" id="block">A</div> 
 
<div class="b" id="block">B</div> 
 
<div class="c" id="notblock">C</div>

Answer 3

をクリックされたボタンは、あなたが見ることができ、最適化されたコードですで。代わりにIDを、あなたはdata属性を使用することができます：理想的

jQuery('.button').click(function() { 
 
    var a = jQuery('.a').data('check'); 
 
    var $belement = jQuery('.b'); 
 
    var b = $belement.data('check'); 
 

 
    if (a === b) { 
 
    $belement.addClass("active").css("background", "red"); 
 
    } 
 
});

.a, 
 
.b, 
 
.c { 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 1em; 
 
    background: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" class="button">Button</a> 
 
<div class="a" id="block-a" data-check="block">A</div> 
 
<div class="b" id="block-b" data-check="block">B</div> 
 
<div class="c" id="notblock" data-check="notblock">C</div>

を、DOMは、同じIDを持つべきではありません。 IDは一意です、クラスは同じにすることができます。したがって、あなたの全体の論理や質問はちょっと間違っています。いくつかの値や他の属性を比較するのではなく、IDを比較する必要があります。 IDはと一意に見なされるため、比較することはできません。