Question

当querySelectorAll中有多个类作为选择器时，有人可以向我解释如何对单个类使用if else语句吗？例如，我有

var x = document.querySelectorAll(".clickMapItem.text , .clickMapItem.multiImageText");

for (i = 0; i < click_map_items.length; i++) {
  click_map_items[i].style.display = "none";
}

<div id="one" class="clickMapItem text" style="display: none;"></div>
<div id="two" class="clickMapItem text" style="display: none;"></div>
<div id="three" class="clickMapItem multiImageText" style="display: none;"></div>
<div id="four" class="clickMapItem text" style="display: none;"></div>
<div id="five" class="clickMapItem multiImageText" style="display: none;"></div>

我想检查所有具有类.clickMapItem.text的div是否显示为none，但是对于第二类检查它是否为显示块。

我尝试使用if (x[0].style.display == "none") { code here } 但它只需要div中的第一个NodeList，我想检查所有内容。

Array.prototype.slice.call参数或其他什么？

Answer 1

使用querySelectorAll()迭代所有contains()。在迭代时，您可以使用classList属性及其var click_map_items = document.querySelectorAll(".clickMapItem"); for (i = 0; i < click_map_items.length; i++) { var elem = click_map_items[i]; if (elem.classList.contains('text')) elem.style.display = "none"; if (elem.classList.contains('multiImageText')) elem.style.display = "block"; }方法来检查元素是否有类。

＆＃13;

.clickMapItem.text {
  display: none;
}
.clickMapItem.multiImageText {
  display: block;
}

＆＃13;

但是，您可以使用Pure CSS规则实现相同的功能

＆＃13;

if (searchString != "") {
            query = _pagedDataQueryProcessor.GetDefaultQuery<Data.Entities.Password>()
                .Where(
                Restrictions.Disjunction()
                    .Add(Restrictions.On<Data.Entities.Password>(x => x.Name).IsLike(searchString))
                    .Add(Restrictions.On<Data.Entities.Password>(x => x.Description).IsLike(searchString))
                    .Add(Restrictions.On<Data.Entities.Password>(x => x.PasswordText).IsLike(searchString))
   );
}

＆＃13;

Answer 2

您可以使用普通的css选择器。请看看这个 - ＆gt; http://jsfiddle.net/5tSGv/12/

var classOne = document.querySelectorAll( '.class1:not(.class2)' );
for( var i = 0; i < classOne.length; i++ ) {
    classOne[i].style.backgroundColor="#f3f3f3";
}

Answer 3

这是它应该是什么样子的最终版本

＆＃13;

 < script >
   function changeStyle(hotspotid) {
     var hotspot = hotspotid.replace('_clickable', '');
     var x = document.getElementById(hotspot);
     click_map_items = document.querySelectorAll(".clickMapItem");
     for (i = 0; i < click_map_items.length; i++) {
       var elem = click_map_items[i];

       elem.style.display = "none";

       if (elem.classList.contains('text')) {
         document.getElementById("clickMap_item_default").style.display = "none";
         x.style.display = "block";
       };

       if (x.classList.contains('multiImageText')) {
         document.getElementById('clickMapFlashContainer').style.display = "none";

       };
     };
   };

 function backClose() {
   for (i = 0; i < click_map_items.length; i++) {
     click_map_items[i].style.display = "none";
   }
   document.getElementById('clickMapFlashContainer').style.display = "";
   document.getElementById("clickMap_item_default").style.display = "";
 }; 

< /script>

＆＃13;

如何检查document.querySelectorAll中的单个类参数？

3 个答案: