Question

我今天一直试图以各种方式解决以下问题。我已经花了好几个小时，我似乎无法弄明白该怎么做。

基本问题是：我有一堆JavaScript逻辑继续判断以下变量是否应为1或0。

1)active
2)alternative
3)classic
4)vintage
etc....

所有这些变量在我的设计中基本上都是过滤器。我需要它们来确定是否应该显示产品。因此，一旦确定了这些值，我想通过附加或删除CSS类（让我们称之为.style）来相应地显示产品样式（或隐藏产品样式）。每个产品都附有一个或多个过滤器。因此，就像一双鞋子可能是经典的替代品，在这种情况下，经典OR替代变量中的1应该使鞋子显示出风格。

这种显示方面的最佳方法是什么？我在考虑编写一个自定义选择器，但我很难搞清楚如何编写它。

像...一样的东西。

if($(".divProducts").hasClass(active) || $(".divProducts").hasClass(alternative) || etc..)
{
 ....?
}

但是我没有这么做，因为首先，即使IF语句子句正确解析，我也不会知道哪个产品实际上返回了1替代或活动或任何其他过滤器。

这很难解释。

TLDR;基本上我需要这个：

如果某个div容器中的任何元素都有任何值为1的过滤器，请将.style应用于每个元素。

非常感谢帮助，因为这是明天到期的项目的一部分......我没想到会有这么难的时间：\

顺便说一句，产品跟踪类的过滤器。所以举个例子鞋子产品 - ＆gt;

<div class="blah blah vintageFilter blah blah">...</div>

我想将.style类应用于此div IF复古变量是1.有意义吗？

Answer 1

我认为这种方法更具可读性，更易于管理

 switch(true) {

 case $('.divProducts').hasClass(active) :
     // some action
 break;

 case $(".divProducts").hasClass(alternative) :
    // some action
 break;

 default :
 //some action

}

Answer 2

这应该有效：

// First clear the .style class from everything
$('.divProducts').removeClass('style');
// Then add it to the selected items
$('.divProducts.active, .divProducts.alternative').addClass('style');

Answer 3

如果你包含了一些HTML会有所帮助，但既然你没有，我会假设你有这样的东西：

<强> HTML

<fieldset>
    <label><input type="radio" name="type" value="active" />Active</label>
    <label><input type="radio" name="type" value="alternative" />Alternative</label>
    <label><input type="radio" name="type" value="classic" />Classic</label>
    <label><input type="radio" name="type" value="vintage" />Vintage</label>
</fieldset>
<div id="result">You picked: <span id="selection"><span></div>
<div class="products">
    <div class="vintage classic">Vintage and Classic</div>
    <div class="vintage">Vintage</div>
    <div class="classic">Classic</div>
    <div class="classic alternative">Alternative and Classic</div>
    <div class="alternative">Vintage and Classic</div>
</div>

解决方案很简单，您甚至不需要条件。我实现它的方式是使用以下JavaScript：

<强>的JavaScript

$("input[name='type']")
    .on("click", function()
        {
            // Clear result showing state
            $("#result").removeAttr("class");

            // Get selected value
            var typeVal = $(this).attr("value");
            $("#result").addClass(typeVal);
            $("#selection").text(typeVal);

            // Remove match class
            $(".products div").removeClass("match");

            // Show matching products and add match class
            $(".products ." + typeVal).addClass("match");
        });

使用这个CSS：

<强> CSS

.active { color: #f00; }
.alternative { color: #0f0; }
.classic { color: #00f; }
.vintage { color: #999; }
.match { background: #ccc; }

这是jsFiddle的链接：http://jsfiddle.net/XQVet/3/

更新：更改了它，以便元素不会消失。

Jquery自定义编写选择器

3 个答案: