有條件取決於風格

我試圖讓一個條件語句工作，只有當某些元素具有特定的內聯css風格時纔會運行。有條件取決於風格

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

$(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;，但我不希望淡入淡出功能運行只要任何一個盒子具有該不透明性即可。謝謝。

來源

2013-10-21 cat-t

這似乎是一個相當後門的方式，你的應用程序，它與功能風格。幾乎肯定有更好的方法。如何在褪色時添加課程？ – isherwood

是的，像isherwood提到的，也許利用.addClass（className）和.removeClass（[className]）會是一個更好的選擇。你可以用.hasClass（className）檢查一個類，然後根據需要添加或刪除淡化類。 – Digfield

是的，這就是我原本要做的，我只是不確定這是否是最有效的方法。 –

雖然它是完全以能夠創建一個有jQuery和測試透明度CSS屬性自定義過濾器，我會強烈建議改變你的設計和說創造新的CSS類，像

.glass { 
    opacity: 0.4; 
}

並申請該類而不是內聯財產或與之一起。

然後

selector.filter('.glass')

過濾從你的所有元素元素的子集。

否則，使用過濾器功能：

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

來源

2013-10-21 20:57:58 vittore

一般來說，在條件語句添加事件處理是不是你想要的。相反，總是綁定處理程序，然後檢查處理程序中的條件。但在這種情況下，我認爲你實際上並不需要條件。我認爲你在尋找這樣的事情：

http://jsfiddle.net/tHUwK/

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

來源

2013-10-21 20:58:26

我同意使用類的答案。但是，爲了解釋爲什麼你的工作不能正常工作......您的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-21 21:07:09

感謝您的解釋，我只是要用類方法。 –

有條件取決於風格

回答

相關問題