Question

请帮助我在这方面............... 我希望根据选择激活所有链接，这意味着当我在DropDown中选择“First”元素时，所有包含id为“First”的链接将处于活动状态，其他将处于unbind阶段....... ......

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

<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......    
    }
});

当我选择First时，所有“First”id值链接都将处于活动状态.... Pleasse .......帮助我............

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();
   } );

});

Answer 2

我更改了你的html以包含链接的类，因此JQuery代码将起作用。我还修改了你的改变事件以便正常工作。

HTML：

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

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

JavaScript的：

$('#link').on("change",function(selection) {

        //get the value first or second
        var value = $(this).val();

        //do something with the selected class
        $("." + value).css("color","yellow");            

    });

只要包含相同的值，所有链接都将处于活动状态

2 个答案: