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

ALL Links will be Active whenever they contain same value

本文关键字:活动状态 链接 包含相      更新时间:2023-09-26

请在这方面帮助我......我想根据选择激活所有链接,这意味着当我在下拉列表中选择"第一个"元素时,所有包含 id 作为"第一个"的链接都将处于活动状态,其他链接将处于解绑阶段......

请帮助我。

<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 值链接都将处于活动状态。恳求。。。帮帮我。。。。。。。。。。。

首先,要么使用唯一 id,要么使用其他属性,如 classdata-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();
   } );
}); 

我更改了您的 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");            
    });