Question

我有js可供选择，当选项值等于其可见的元素类时，按选择的选项（值==类）显示另一个元素

如何使js与每个选择元素一起使用？

这是我的代码：

$("select").change(function() {
  $(this).find("option:selected").each(function() {
    var optionValue = $(this).attr("value");
    if (optionValue) {
      $(".amwselected").not("." + optionValue).hide();
      $("." + optionValue).show();
    } else {
      $(".amwselected").hide();
    }
  });
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="widget-as_about_me_widget" class="widefat select-img">
  <option value="gravatar">My Gravatar</option>
  <option value="custom" selected="selected">Custom Image</option>
</select>

<div class="amw-row amwselected custom">
  <input class="widefat" type="text" value="custom" />
</div><br>

<select id="widget-as_about_me_widget-select_style">
  <option value="default">default</option>
  <option value="diamond">diamond</option>
  <option value="round">round</option>
  <option value="hexagon" selected="selected">hexagon</option>
</select>

<div class="amw-row amwselected hexagon">
  <input class="widefat" type="text" value="hexagon" />
</div>

Answer 1

$("select").change(function() {
  //create a selector that matches on any class, not just one at a time
  var filter = '.'+ $('select').map(function(){ return this.value; }).get().join(', .');
  
  //log the filter so you can see it
  console.log(filter);
  
  //hide all the things, find the ones that should show, and show them
  $(".amwselected").hide().filter(filter).show();
}).eq(0).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="widget-as_about_me_widget" class="widefat select-img">
  <option value="gravatar">My Gravatar</option>
  <option value="custom" selected="selected">Custom Image</option>
</select>

<div class="amw-row amwselected custom">
  <input class="widefat" type="text" value="custom" />
</div>

<select id="widget-as_about_me_widget-select_style">
  <option value="default">default</option>
  <option value="diamond">diamond</option>
  <option value="round">round</option>
  <option value="hexagon" selected="selected">hexagon</option>
</select>

<div class="amw-row amwselected hexagon">
  <input class="widefat" type="text" value="hexagon" />
</div>

jQuery隐藏/显示每个选择标签

1 个答案: