代码之家 › 专栏 › 技术社区 › user7262544

如何将变量添加到伪类的jquery选择器?

pseudo-element css jquery

user7262544 · 技术社区 · 8 年前

可以将变量添加到伪元素的jquery字符串选择器中吗?我已经尝试了下面两种代码,但都没有看到工作,你能帮助我吗?

   $(function () {
    $("option").click(function(){
    var filt1 = $(this).attr('id');
 $("#filter2 option[class!=filt1]").hide();
  $("#filter2 option[id*=filt1]").show();
});
});

 $(function () {
        $("option").click(function(){
        var filt1 = $(this).attr('id');
     $('#filter2 option[class!='+ filt1+ ']').hide();
      $('#filter2 option[id*='+ filt1+']').show();
    });
    });

2 回复 | 直到 8 年前

charlietfl 8 年前

上不支持事件和隐藏 <option> 跨浏览器!基于第一个选择中的值删除和附加

首先存储并移除 <

更改为使用filter1中选项的值,并使用 <select> .

然后在进行更改时…克隆并过滤存储的 < 并将过滤后的只放入#filter2

var $filter2 = $('#filter2'),
  // store options for #filter2
  $filter2Opts = $filter2.children().detach();

$('#filter1').change(function() {    
  var $newOpts = $filter2Opts.clone().filter('.' + $(this).val())
  $filter2.html($newOpts);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple size="2" id="filter1">
  <option value="opt1">I'm option 1</option>
  <option value="opt2"> I'm option 2</option>
</select>

<select multiple size="4" id="filter2">
  <option class="opt1"> I'm option 1 sub-option A</option>
  <option class="opt1"> I'm option 1 sub-option B</option>
  <option class="opt2"> I'm option 2 sub-option A</option>
  <option class="opt2"> I'm option 2 sub-option B</option>
</select>

brm252 8 年前

$(function () {
   $("option").click(function(){
      var filt1 = $(this).attr('id');
      $('#filter2 option[class!="'+ filt1+ '"]').hide();
      $('#filter2 option[id*="'+ filt1+'"]').show();
   });
});

但如果我理解你想正确地做什么,你可能会想要:

$(function () {
    $("option").click(function(){
        var filt1 = $(this).attr('id');     
        $('#filter2 option').hide();
        $('#filter2 option.'+ filt1).show();
    });
});

但是正如charlietfl所说,通过CSS隐藏选项不兼容跨浏览器,所以你可能想按照他们说的方式来做。

推荐文章