如何将变量添加到伪类的 jquery 选择器？答案

【问题标题】：How can I add a variable to a jquery selector of a pseudo-class?如何将变量添加到伪类的 jquery 选择器？
【发布时间】：2023-04-01 06:40:02
【问题描述】：

是否可以将变量添加到伪元素的 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();
    });
    });

【问题讨论】：

能否也提供一些 HTML 输出？
事件和隐藏<option> 在某些浏览器（例如 IE 和 Safari）中不受支持。在<select> 上使用更改事件并禁用或删除选项
我正在尝试创建一个变量，这样我就不需要为每个 ID 复制和粘贴代码。请检查这个jsfiddle：
jsfiddle.net/vitordhers/zw0a9d4m

标签： jquery css pseudo-element

【解决方案1】：

<option> 跨浏览器不支持事件和隐藏！根据第一次选择中的值删除和追加

首先存储并删除#filter2 中的<option>s。

更改为使用 filter1 中选项的值并使用<select> 的更改事件。

然后当进行更改时...克隆并过滤存储的<option>，并将过滤后的仅放入#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>

【讨论】：

是的，这非常优雅地解决了它。感谢您的支持

【解决方案2】：

您的第二次尝试已接近尾声，您只是在属性值周围缺少引号：

$(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 隐藏选项不兼容跨浏览器，因此您可能希望按照他们所说的方式进行操作。

【讨论】：