使用与 select 选项属性相同的数据属性显示 div

Question

我想根据多个 if 语句显示设置为在 css 中显示 none 的 div。为此，我想使用数据属性并获取该数据值以匹配隐藏 div.

的数据值

选项：

<select class="selectOptions" id="selectOptions1">
    <option data-name="man">
        man1
    </option>
    <option data-name="woman">
        woman
    </option>
    <option data-name="child">
        child
    </option>   
</select>

<select class="selectOptions" id="selectOptions2">
    <option data-age="30">
        man1
    </option>
    <option data-age="25">
        woman
    </option>
    <option data-age="10">
        child
    </option>   
</select>

隐藏 divs:

<div class="dataTest" data-age="25" data-name="man">Hey Man</div>
<div class="dataTest" data-age="20" data-name="woman">Hello Woman</div>
<div class="dataTest" data-age="10" data-name="child">Hi Child</div>

和 js:

$('.selectOptions').on('change', function() {

  var ageValue = $('#selectOptions2 option:selected').data('age');
  var nameValue = $('#selectOptions1 option:selected').data('name');
 // alert(nameValue + ' ' + ageValue);

  $('.dataTest').filter(function() {
    return this.dataset.name === nameValue || this.dataset.age === ageValue
  }).css("display", "block").siblings(".dataTest").css("display", "none");
});

更改时数据属性的值在警报显示时被正确找到，但我无法在我的条件中使用这些变量。欢迎任何帮助。谢谢。

Answer 1

在点击处理程序中，您可以使用：

 $('.dataTest').hide();
 $("div[data-name="+$(this).find(':selected').attr('data-name')+"]").show();

Working Demo

Answer 2

你可以使用 filter()

$('.dataTest').hide().filter(function(){
    return $(this).data('name') === nameValue || $(this).data('age') === ageValue
}).show();

在您的代码 $(this) 中 if() 指的是 select 下拉菜单。所以不行。

Fiddle Demo

此外，如果您使用相等运算符比较值，则 select 下拉列表和隐藏的 div 中的值应该相同。

Answer 3

您当前的代码不起作用，因为 $('.dataTest').data("name") == nameValue) 将比较 $('.dataTest') 集合中第一项的名称值。这是典型的 jQuery 函数 return 字符串。

你想要的是一个属性选择器：

$(".dataTest[data-name=" + nameValue + "]").css("display", "block");
$(".dataTest[data-age=" + ageValue + "]").css("display", "block");

Answer 4

尝试利用 .filter() 到 select .dataTest 元素，siblings() 隐藏以前 selected .dataTest 兄弟姐妹

$('.selectOptions').on('change', function() {

      var ageValue = $(':selected', this).data('age');
      var nameValue = $(':selected', this).data('name');
      var filtered = ageValue || nameValue;
      alert(filtered);

      $('.dataTest').filter(function() {
        var name = this.dataset.name, age = this.dataset.age;
        return name == filtered || age == filtered 
      }).css("display", "block").siblings(".dataTest").css("display", "none");
    });

.dataTest {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="selectOptions" id="selectOptions1">
    <option data-name="man">
        man1
    </option>
    <option data-name="woman">
        woman
    </option>
    <option data-name="child">
        child
    </option>   
</select>

<select class="selectOptions" id="selectOptions2">
    <option data-age="30">
        man1
    </option>
    <option data-age="25">
        woman
    </option>
    <option data-age="10">
        child
    </option>   
</select>
<div class="dataTest" data-age="25" data-name="man">Hey Man</div>
<div class="dataTest" data-age="20" data-name="woman">Hello Woman</div>
<div class="dataTest" data-age="10" data-name="child">Hi Child</div>

使用与 select 选项属性相同的数据属性显示 div

Show div with the same data-attribute as select option attribute

html

jquery

show