Question

我正在尝试获取一个条件语句，只有在某些元素具有特定的内联css样式时才会运行。

<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;，但我不希望淡入淡出函数再次运行，只要任何框具有该不透明度。感谢。

Answer 1

尽管可以使用jquery和test opacity css属性创建自定义过滤器，但我强烈建议您更改设计并说创建新的css类，例如

 .glass { 
    opacity: 0.4;
 }

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

然后

selector.filter('.glass')

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

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

 $( "div" ).filter(function( index ) {
     return $( this ).css('opacity') == "0.4";
 })

Answer 2

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

使用您的方法并且只修复错误，您将得到以下内容：

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")

    }
});

同样，不要使用此解决方案，请使用类与其他一个答案一起使用。我只是觉得有必要解释你的代码出了什么问题。

Answer 3

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

http://jsfiddle.net/tHUwK/

$('.box').on('click', function() {
    $(this).removeClass('faded').siblings('.box').addClass('faded');
});

条件取决于风格

3 个答案: