Question

在我的页面上，我有大量的DIV，每个DIV代表一个特定的产品，具有一系列特征。我将这些特征用作类，因此每个产品都会以类似的方式开始：

<div class='classA classB classC classD classE classF'>
  Product Card
</div>

理想情况下，在我的网页上，我希望每个类都有一个<select>元素，这样当用户从下拉列表中选择一个值时，只剩下具有相应类的<div>显示在页面上，而其他所有内容都隐藏。

此外，对班级的检查必须同时考虑所有班级。我的意思是，如果用户从3个下拉菜单中选择值，则只会显示所有3个选定类别的<div>。

我尝试使用javascript实现这个想法，使用以下代码：

＆＃13;

function filterPowerInput() {
  var powerInput = document.getElementById("powerInput").value;
  if (powerInput == 1) {
    var myClasses = document.querySelectorAll('.ph3ph'),
      i = 0,
      l = myClasses.length;
    for (i; i < l; i++) {
      myClasses[i].style.display = 'none';
    }
    var myClassesTwo = document.querySelectorAll('.ph1ph'),
      i = 0,
      l = myClassesTwo.length;
    for (i; i < l; i++) {
      myClassesTwo[i].style.display = 'block';
    }
  } else if (powerInput == 3) {
    var myClasses = document.querySelectorAll('.ph1ph'),
      i = 0,
      l = myClasses.length;
    for (i; i < l; i++) {
      myClasses[i].style.display = 'none';
    }
    var myClassesTwo = document.querySelectorAll('.ph3ph'),
      i = 0,
      l = myClassesTwo.length;
    for (i; i < l; i++) {
      myClassesTwo[i].style.display = 'block';
    }
  } else {
    var myClasses = document.querySelectorAll('.ph1ph'),
      i = 0,
      l = myClasses.length;
    for (i; i < l; i++) {
      myClasses[i].style.display = 'block';
    }
    var myClassesTwo = document.querySelectorAll('.ph3ph'),
      i = 0,
      l = myClassesTwo.length;
    for (i; i < l; i++) {
      myClassesTwo[i].style.display = 'block';
    }
  }
}

＆＃13;

此示例适用于只能假设2个值的类，但只要类具有更多值（它们最多可达12个），就无法进行管理。此外，通过在不同的下拉列表中使用上述代码的类似版本，它们将相互覆盖，我还没有找到一种方法让它们在我需要的时候一起工作。

我希望它足够清楚，否则只是问。非常感谢您一如既往的时间！

（我的页面的其余部分是PHP / HTML / Javascript的混合）

Answer 1

比回答你的问题更重要的事情。我知道这不是答案，但我必须表明这件事的重要性。

作为开发人员，如果您不止一次编写相同代码的块 - 有些事情是不对的。为什么不简单地编写一个执行相同过程的函数呢？

var customtog = function(cls, dis){
  var myClasses = document.querySelectorAll(cls),
      i = 0,
      l = myClasses.length;

  for (i; i < l; i++) {
      myClasses[i].style.display = dis;
  }
}

所以看看你的代码现在会看起来如何： 更容易遵循和维护。

if(powerInput == 1)
{
  customtog('.ph3ph', 'none');
  customtog('.ph1ph', 'block');
}
else if(powerInput == 3)
{
  customtog('.ph1ph', 'none');
  customtog('.ph3ph', 'block');       
}
else
{
  customtog('.ph1ph', 'block');
  customtog('.ph3ph', 'block');
}

更新 - 关注@mplungjan评论

customtog('.ph3ph', powerInput==1?'none':'block');
customtog('.ph1ph', powerInput==1?'block':'none');

Answer 2

我认为这就是你的意思

largest = i1

$(function() {
  $(".sel").on("change",function() {
    var classLst = ["selDiv"];
    $(".sel").each(function() {
      var val = this.value;
      if (val) classLst.push("class"+val);
    });
    classLst.sort();
    $(".selDiv").each(function() {
      var divClassLst = $(this).attr("class");
      if (divClassLst) {
        $(this).toggle(divClassLst.split(" ").sort().join(".") == classLst.join("."));
      }  
    }) 
  }).change(); // run when loaded
});

.selDiv { display:none; }

隐藏所有不包含所有指定类的DIV

2 个答案: