單擊按鈕時的樣式元素

我有動態創建的項目和按鈕，我想通過使用jquery（我正在使用AJAX）樣式化它們來顯示用戶正在發生的事情。每個項目如下所示：單擊按鈕時的樣式元素

<li class="items"> 
<div class="itemheading"> 
<div class="controls"> 
    <span class="votes">1</span> 
    <form class="actions" method="POST"> 
     <input type="submit" class="button plus" value="+1" data-plus="123"> 
    </form> 
    <form class="actions" method="POST"> 
     <input type="submit" class="button minus" value="-1" data-minus="123"> 
    </form> 
    <form class="actions" method="POST"> 
     <input type="submit" class="button delete" value="X" data-del="123"> 
    </form></div><span class="title">Item title</span> 
</div> 
<span class="infotext">Item Description</span> 
</li>

當單擊按鈕時，我希望項目的樣式被更新。例如，如果單擊+1按鈕，則項目邊框應該淡入綠色，然後在幾秒鐘的時間內消失爲空，以顯示該項目已被投票。

我所想的，到目前爲止是這樣的：

$(".plus").live('click', function() { 
$(this).css("background", "#fff");

這不工作，雖然。我以爲我可以使用$(this)引用一個被點擊，因爲我使用這個按鈕已經獲得按鈕的數據 - 標記值：

var plus = $(this).data('plus');

的另一個問題是，即使它沒有工作，它會風格按鈕邊框，我需要以某種方式樣式<div class="itemheading">。我只能說風格的.itemheading元素，但因爲我將有多個項目，我需要找到另一種方法。也許有一種方法可以引用元素的父元素，然後我可以獲得父元素的父元素？

謝謝。任何幫助真的很感激。

更新：所以人們可以看到什麼工作繼承人的代碼。

$(".plus").live('click', function() { 
$(this).parents(".itemheading").css("background", "#000"); 
});

來源

2012-07-18 cohen

您的代碼是否放置在文檔準備好的回調中？ – Lix 2012-07-18 12:28:26

@Lix我認爲這就是'$（function（）{// code is in here}' – cohen 2012-07-18 12:31:14

是 – Lix 2012-07-18 12:32:21

這裏是工作的例子，不知道這是你換貨什麼，但點擊+1按鈕後，類加類.itemheading與父元素將閃爍黑色。

示例 - http://jsfiddle.net/yZmrz/

來源

2012-07-18 12:30:39 y2ok

我可以知道你爲什麼投票給我的答案嗎？ – y2ok 2012-07-18 12:32:32

不知道誰投了票。反正實際工作我把按鈕插入其中，它只會使一個標題黑色，這是完美的。 – cohen 2012-07-18 12:35:32

那麼它能解決你的問題嗎？ – y2ok 2012-07-18 12:36:12

2個問題，

次要問題.live已被棄用，使用。對代替http://api.jquery.com/on/

的主要問題，你提到的這些按鈕動態添加，所以我猜測你在創建元素之前綁定了.live事件。綁定僅適用於已存在的元素。

要解決此問題，您應該將事件本身綁定在始終存在的父元素上，以處理其子元素的點擊。像這樣：

$('.parent').on('click', '.plus', function(){ 
    $(this).css({background: "black"}); 
});

這將完成的，確保每一個點擊。再加上元素，這是.parent的後代上，觸發功能，無論它被創建時的感覺。

爲確保只將更改應用於相關元素，而不是所有的人，使用行程（http://api.jquery.com/category/traversing/）

遍歷裝置，你可以說，他們是相對於$（本）訪問元素。因此$（this）.siblings（'。myClass'）將只選擇與$（this）相同元素的.myClass元素。

來源

2012-07-18 12:34:34 Rodik

感謝您的指點。因爲他們有幫助而投票贊成。 – cohen 2012-07-18 12:39:41

單擊按鈕時的樣式元素

回答

相關問題