0

我今天一直在尝试以各种方式解决以下问题。我已经花了几个小时，但我似乎无法弄清楚如何去做。

基本问题是这样的：我有一堆 JavaScript 逻辑来确定以下变量应该是 1 还是 0。

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

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

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

就像是...

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

但我并没有走得太远，因为首先，即使 IF 语句子句解析正确，我也不知道哪个产品实际上在替代或活动或任何其他过滤器中返回了 1。

这真的很难解释。

TLDR；基本上我需要这个：

如果某个 div 容器中的任何元素具有任何值为 1 的过滤器，则应用.style到这些元素中的每一个。

非常感谢您的帮助，因为这实际上是明天到期的项目的一部分...我没想到会遇到这样的困难：\

顺便说一句，产品会跟踪过滤器的类别。所以例如鞋子产品-> 

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

我想对.style这个 div 应用类 IF 年份变量为 1。有意义吗？

4

3 回答 3

1

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

 switch(true) {

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

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

 default :
 //some action

}
于 2013-07-19T04:22:40.547 回答
1

这应该有效：

// First clear the .style class from everything
$('.divProducts').removeClass('style');
// Then add it to the selected items
$('.divProducts.active, .divProducts.alternative').addClass('style');
于 2013-07-19T04:36:47.397 回答
0

如果你包含了一些 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/

更新：改变它，使元素不会消失。

于 2013-07-19T04:42:15.697 回答