有条件的取决于样式

conditional depending on style

本文关键字：样式 取决于 有条件      更新时间：2023-09-26

我正在尝试让一个条件语句工作，该语句仅在某些元素具有特定的内联 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;，但只要任何框具有这种不透明度，我就不希望淡入淡出功能再次运行。谢谢。

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

 .glass { 
    opacity: 0.4;
 }

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

然后 

selector.filter('.glass')

从您拥有的所有元素中筛选元素的子集。

否则，请使用带有函数的过滤器：

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

我同意使用类的答案。 但是，要解释为什么你的不起作用...您的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")
    }
});

同样，不要使用此解决方案，而是使用类使用其他答案之一。 我只是认为值得解释一下您的代码出了什么问题。

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

http://jsfiddle.net/tHUwK/

$('.box').on('click', function() {
    $(this).removeClass('faded').siblings('.box').addClass('faded');
});
相关文章：