2

希望这不是一个重复的问题，但如果是，只需发布​​链接作为您的回复。

我需要创建一个网站，顶部有一个选择下拉列表，上面有几个选项，下面有几个 div，里面有几个链接。

根据您在选择框中选择的选项，适当标记的链接将突出显示。

这是基本结构：

<select>
  <option value="o1">Option 1</option>
  <option value="o2">Option 2</option>
  <option value="o3">Option 3</option>
  <option value="o4">Option 4</option>
</select> 

<div>
  <a href="#" class="o1">Link A</a>
  <a href="#" class="o2">Link B</a>
  <a href="#" class="o3">Link C</a>
  <a href="#" class="o4">Link D</a>
</div>

<div>
   <a href="#" class="o1">Link A</a>
   <a href="#" class="o2">Link B</a>
   <a href="#" class="o3">Link C</a>
   <a href="#" class="o4">Link D</a>
</div>

我知道这个过程将包括 .addClass() .removeClass() 和 .change()，我只是不确定如何将它们放在一起，以便它在所有 div 中动态工作。

提前致谢。

4

4 回答 4

3

链接如下：

$('select').on('change', function(){
    var klass = this.value;
    $('.highlight').removeClass('highlight');
    $('a.'+klass).addClass('highlight');
});
于 2012-05-31T19:25:37.010 回答
1 
$('select').on('change', function() {      // binding change event for select
                                           // fires when select box change

  var mycls = this.value;                  // getting the value of select 
                                           // box after change



  $('a:not(".'+ mycls +'")')               // select <a> tag that has no 
                                           // class same as select box value
              .removeClass('some_class');  // and remove highlight 
                                           // class form that <a>

  $('a.' + mycls)                          // select the <a> with class 
                                           // same as select box value
             .addClass('some_class');      // and adding highlight class
});

最初使链接突出显示只需触发初始更改

$('select').on('change', function() {
  var mycls = this.value;
  $('a:not(".'+ mycls +'")').removeClass('some_class');
  $('a.' + mycls).addClass('some_class');
}).change(); // here the initial change event triggered

演示

于 2012-05-31T19:25:08.963 回答
0

假设您为选择列表提供了一个 id，例如 selectid，并且您有一个名为 .highlight 的类，您可以执行以下操作：

$('#selectid').change(function(){

  $('*').removeClass('highlight');

  $('.'+$(this).val()).addClass('highlight'); 

});

我没有测试过上述内容，但它应该让你走上正轨。

于 2012-05-31T19:30:27.690 回答
0

似乎您已经回答了最后一句中的问题，但这是下一步。

您必须将 .change() 事件处理程序添加到您的选择框。

$("select").change(function () {

});

然后，即使发生这种情况，请读取所选值，并且由于您将它们命名为相同，因此将样式应用于该类。

$("select").change(function () {
    $( "." + $(this).attr("value") ).css("background", "#ccc");
}
于 2012-05-31T19:27:50.353 回答