Question

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

选项：

INSTALLED_APPS = (
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django.contrib.auth',
    'django.contrib.sites',
    'djangocms_admin_style', # for the admin skin. must be before 'django.contrib.admin'                             
    'django.contrib.admin',
    'cms', # django CMS itself                                                                                       
    'treebeard', # utilities for implementing a tree (replaces mptt)                                                 
    'menus', # helper for model independent herarchical website navigation                                           
    'sekizai', # for JS and CSS management.                                                                          
    'reversion', # to versionize content                                                                             
    #'djangocms_file',                                                                                               
    #'djangocms_picture',
    #'djangocms_video',                                                                                              
    #'djangocms_link',                                                                                               
    #'djangocms_text_ckeditor', # django text plugin                                                                 
)

隐藏的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>

和js：

<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>

当警报显示时，可以正确找到更改后的数据属性的值，但我不能在我的条件中使用此变量。我们非常欢迎任何帮助。感谢。

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()指的是选择下拉列表。所以它不会起作用。

<强> Fiddle Demo

另外，如果使用相等运算符比较值，则select drowdown和隐藏div中的值应相同。

Answer 3

您当前的代码无效，因为$('.dataTest').data("name") == nameValue)将比较$('.dataTest')集合中第一项的名称值。这是返回字符串的jQuery函数的典型特征。

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

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

Answer 4

尝试使用.filter()选择.dataTest元素，siblings()隐藏之前选定的.dataTest兄弟

＆＃13;

$('.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");
    });

＆＃13;

.dataTest {
  display: none;
}

＆＃13;

<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>

＆＃13;

使用与select选项属性相同的data-attribute显示div

4 个答案: