切換點擊備選

Question

如果你去查看JQuery的.toggle的api，你可以看到1.8版本已被棄用，1.9版本被刪除。

這是我通常會使用的，如果我使用的是舊版本的JQuery。 [Example]

$('.drop-section a').toggle(function() { 
    $(this).css({"color" : "#666", "background-color" : "#1f1f21"}); 
}, 
function() { 
    $(this).css({"color" : "#a9a9a9", "background-color" : "#444"}); 
}); 

我試圖從一個單擊事件做一個簡單的解決方法。但我無法正常工作。 [Here's the fiddle]

我知道我可以使用toggleClass，但我想用下面的東西來達到這個效果。

$('.drop-section a').click(function() { 
    var clicked = false; 

    if (clicked) { 
    clicked = false; 
    $(this).css({"color" : "#a9a9a9", "background-color" : "#444"}); 
    } 
    clicked = true; 
    $(this).css({"color" : "#666", "background-color" : "#1f1f21"}); 

}); 

任何幫助，非常感謝。

Answer 1

其實你可以不喜歡它：

LIVE DEMO

$('a').click(function(e) { 
    e.preventDefault(); 
    var c = this.c = !this.c; // Will remember the clicked state 
    $(this).css({ "color": c?"#666":"#aaa" }); 
}); 

解釋它是如何工作的：

以上是幾乎相同的設置元素data-*屬性，而是我們將使用對象本身並分配一個屬性，它會保存一個布爾值。

DEMO

$('a')是對象元素的一個jQuery集合，
所以它是一個對象，和this它是該點擊元件的JS表示。
在JS中，我們總是可以添加一個新的屬性到一個對象，如：object.something = "value";對不對？

好了，在我們的例子中，我們將使用this對象和分配虛擬財產稱爲c，如：this.c

所以現在我們需要的是設置一個布爾（真/假）值，其連接到this.c

this.c = true ; 

也要考慮到我們需要切換每個值點擊我們喜歡：

this.c = !this.c ; 

否定只會將布爾值反轉爲相反。

到目前爲止我們有什麼？

每次點擊我們將按鈕的this.c屬性切換到true/false。

讓我們使用布爾，並將其存儲到一個變量，我們會打電話給爲簡單起見c

var c = this.c = !this.c; 

這基本上意味着c = (a true/false value)的每次點擊直接存儲到該元素屬性。

現在具有布爾值，我們可以結合使用它條件運算（AKA 三元運算符）?:切換任何期望值，在我們的情況下，顏色：

statement ? do this if true : do that if false ; 

或在我們的例子中：

"color": (c ? "#666" : "#aaa") // #666 if true, #aaa if false 

Answer 2

就你而言，我只是使用toggleClass()，它仍然受支持。添加一個將按鈕更改爲「打開」狀態的類，然後單擊時打開和關閉該類。我改變你的JSbin證明：New JSBin

編輯：如果你決心與您的代碼做到這一點，還是有你不告訴我們其他要求：一旦你離開了你的處理程序變量clicked被銷燬，所以當它被點擊時它不會「記住」。你也不想僅僅把它變成全局的，因爲那樣它就不能用於多個按鈕。

你想要的是附加了「點擊」數據，你就切換事物的元素，這是很容易與data()方法：

$('.drop-section a').click(function() { 
    if ($(this).data('clicked')) { 
    $(this).data('clicked',false); 
    $(this).css({"color" : "#a9a9a9", "background-color" : "#444"}); 
    } else { 
    $(this).data('clicked',true); 
    $(this).css({"color" : "#666", "background-color" : "#1f1f21"});  
    } 
}); 

而且，我不知道爲什麼第二位不包含在else{}中，但應該是，否則它將總是以「被點擊」結束，而不管狀態如何。我（意外的是，JSBin版本比缺乏jsfiddle更新）上面的鏈接使用此代碼。舊鏈接here。如果它看起來沒有工作，請確保單擊「使用JS運行」按鈕。

Answer 3

演示http://jsbin.com/ODIMaju/1/edit

更好智能的toggleClick工作演示：http://jsbin.com/ODIMaju/1/edit

。觸發器警報將幫助你理解，我已經改變了變量的作用域。

進一步，如果你熱衷:)http://forum.jquery.com/topic/beginner-function-toggle-deprecated-what-to-use-instead

休息就足夠了您的需求:)

代碼

$.fn.toggleClick = function(){ 
    var methods = arguments, // store the passed arguments for future reference 
     count = methods.length; // cache the number of methods 

    //use return this to maintain jQuery chainability 
    return this.each(function(i, item){ 
     // for each element you bind to 
     var index = 0; // create a local counter for that element 
     $(item).click(function(){ // bind a click handler to that element 
      return methods[index++ % count].apply(this,arguments); // that when called will apply the 'index'th method to that element 
      // the index % count means that we constrain our iterator between 0 and (count-1) 
     }); 
    }); 
}; 

代碼

$(document).ready(function() { 
var clicked = false; 

$('.drop-section a').click(function() { 

    if (clicked) { 
    alert(clicked); 
    clicked = false; 
    $(this).css({"color" : "#a9a9a9", "background-color" : "#444"}); 
    } 
    else { 
    alert(clicked); 
    clicked = true; 

    $(this).css({"color" : "#666", "background-color" : "#1f1f2zxc1"}); 
    } 
}); 
}); 

Answer 4

jQuery的頁面，它說：

注意：此方法的簽名被棄用的jQuery 1.8和jQuery的1.9去除。 jQuery還提供了一個名爲.toggle（）的動畫方法，用於切換元素的可見性。動畫或事件方法是否被解僱取決於傳遞的參數集合。

它帶你到這個網頁>>http://api.jquery.com/toggle/

我建議使用toggleClass：

body { 
    background: #333; 
} 

a { 
    cursor: pointer; 
    padding: 5px; 
    background: #444; 
    font: 300 16px/1.5 'museo-sans', 'Open Sans', sans-serif; 
    color: #a9a9a9; 
    outline: none; 
    text-decoration: none; 
    background-color: #444; 
} 

.newClass{ 
    color: #a9a9a9; 
    background-color: #444; 
} 

jQuery的

$(document).ready(function(){ 
    $("a").click(function(){ 
    $(this).toggleClass("newClass"); 
    }); 
});