0

我正在尝试使条件语句起作用，该语句仅在某些元素具有特定的内联 css 样式时才运行。

http://jsfiddle.net/zGg7Z/ HTML

<div>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
</div>

JS

$(function(){

    if ( $('.box').filter( function(){
        return $(this).css('opacity') !== "0.4";
    }) )  {
        $('.box').on('click', function(){
            $(this).siblings('.box').css("opacity", "0.4")
        });
    }

})

因此，当单击一个框时，它的兄弟姐妹会淡化为opacity: 0.4;，但只要任何框具有该不透明度，我不希望淡化函数再次运行。谢谢。

4

3 回答 3

1

我同意使用类的答案。但是，要解释为什么您的不起作用...您if将始终评估为 true，因为filter（即使为空）始终返回一个 jquery 对象。对象是“真实的”。相反，您需要.length检查过滤器是否返回任何内容。最重要的是，您的过滤条件是向后的，因为您希望确保没有任何元素具有该不透明度，而是检查任何元素是否不具有该不透明度。此外，您的数字不匹配0.4，0.3最后您的 if 不在您的点击范围内，应该在里面。

使用您的方法并仅修复错误，您将拥有以下内容：

http://jsfiddle.net/zGg7Z/1/

$('.box').on('click', function(){
    if($('.box').filter( function(){
        return $(this).css('opacity') === "0.4";
    }).length === 0 )  {

        $(this).siblings('.box').css("opacity", "0.4")

    }
});

同样，不要使用这个解决方案，使用一个类来使用其他答案之一。我只是认为值得解释您的代码有什么问题。

于 2013-10-21T21:07:09.860 回答
1

虽然完全可以使用 jquery 创建自定义过滤器并在其中测试 opacity css 属性，但我强烈建议您更改设计并说创建新的 css 类，例如

 .glass { 
    opacity: 0.4;
 }

并应用此类而不是内联属性或与它一起应用。

然后

selector.filter('.glass')

从您拥有的所有元素中过滤元素子集。

否则，使用带有功能的过滤器：

 $( "div" ).filter(function( index ) {
     return $( this ).css('opacity') == "0.4";
 })
于 2013-10-21T20:57:58.003 回答
0

通常，在条件中添加事件处理程序不是您想要的。相反，始终绑定处理程序，然后检查处理程序内部的条件。不过，在这种情况下，我认为您实际上根本不需要条件。我想你正在寻找这样的东西：

http://jsfiddle.net/tHUwK/

$('.box').on('click', function() {
    $(this).removeClass('faded').siblings('.box').addClass('faded');
});
于 2013-10-21T20:58:26.640 回答