javascript - 只要包含相同的值，所有链接都将处于事件状态

Question

请在这方面帮助我............我想根据选择激活所有链接，这意味着当我在下拉菜单中选择“第一个”元素时，所有包含 id 作为“第一个”的链接将处于事件状态，其他链接将处于解除绑定(bind)阶段...... ......

请帮助我............

<select id="link" name="link">
    <option value="first">First</option>
    <option value="second">Second</option>
</select>

<a href="#" id="first">Link1</a>
<a href="#" id="second">Link1</a>
<a href="#" id="second">Link1</a>
<a href="#" id="first">Link1</a>

$('.selection').dropdown({
    onChange: function(value) {
        //Give Me suggestion for the Code......    
    }
}); 

当我选择第一个时，所有“第一个”id 值链接都将处于事件状态......请......帮助我............

Answer 1

首先，要么使用唯一的 id，要么使用其他属性，例如 class 或 data-id。提供一个类，以便您可以将其与页面上的其他链接分开。

<select id="link" name="link">
    <option value="first">First</option>
    <option value="second">Second</option>
</select>

<a href="#" data-id="first" class="link">Link1</a> 
<a href="#" data-id="second" class="link">Link1</a>
<a href="#" data-id="second" class="link">Link1</a>
<a href="#" data-id="first" class="link">Link1</a>

现在将更改事件更新为

$('.selection').change(function() {

   var value = $(this).val();

   //first made all the links inactive
   $( ".link" ).unbind( "click" );

   //now bind the events to links which has same data-id value selected from drop-down
   $( ".link[data-id*='" + value + "']" ).bind( "click", function(){
      alert("link clicked");
   } );
   $( ".link[data-id" ).not("[data-id*='" + value + "']").bind( "click", function(){
      e.preventDefault();
   } );

});