幫助理解jQuery按鈕的啓用/禁用代碼

我抓住了JCarousel的這個代碼表單，並試圖理解下面的這些代碼。我是新來的jQuery並不算大，在JavaScript的，所以我不知道什麼是jQuery和這低於幫助理解jQuery按鈕的啓用/禁用代碼

this.buttonNext[n ? 'bind' : 'unbind'](this.options.buttonNextEvent, this.funcNext)[n ? 'removeClass' : 'addClass'](this.className('jcarousel-next-disabled')).attr('disabled', n ? false : true); 
this.buttonPrev[p ? 'bind' : 'unbind'](this.options.buttonPrevEvent, this.funcPrev)[p ? 'removeClass' : 'addClass'](this.className('jcarousel-prev-disabled')).attr('disabled', p ? false : true);

它設置一些CSS的設置狀態，無論是啓用或禁用按鈕是JavaScript的在一個但我想修改一次，我真的明白它。我無法確切知道它在做什麼100％。

試圖理解諸如[n？ '綁定'：'解除綁定']，並在這裏也鏈接。這4條線有很多。

代碼來自這個插件：http://sorgalla.com/projects/jcarousel/

來源

2009-07-02 PositiveGuy

從技術上講它是所有的JavaScript;） – 2009-07-02 17:53:41

要理解的第一部分是符號解析。 Javacript支持點符號和括號符號。

考慮打開一個新窗口。

window.open()

這是行動中的點符號。你正在告訴解釋器，「開放」可以在「窗口」找到。但有另一種方法可以做到這一點

window['open']()

同樣的事情，但括號表示法。我們不是直接使用符號名稱，而是使用字符串。這意味着，通過在符號解析中使用括號表示法，我們可以以動態方式進行處理，因爲我們可以隨時選擇或創建字符串，而這正是代碼片段的功能。

this.buttonNext[n ? 'bind' : 'unbind'](...);

很是類似

if (n) 
{ 
    this.buttonNext.bind(...); 
} else { 
    this.buttonNext.unbind(...); 
}

如果你不認識？：語法，這就是conditional operator或條件表達式

[expression] ? [valueIfTrue] : [valueIfFalse]

這是極其錯誤往往被稱爲「三元運算符」，但實際上它只是一個三元運營商（三個操作數的操作）。原因是因爲在javascript（和大多數語言）中是只有三元運算符，所以說明通常是蒼蠅。

這有幫助嗎？你還有什麼需要清理的嗎？

來源

2009-07-02 17:38:49

雖然我看這是怎麼回事的碎片，把它完全恍如的jCarousel一個爛攤子。 – PositiveGuy 2009-07-07 03:13:31

[n ? 'bind' : 'unbind']

如果語句是一個，它可以改寫爲

if (n) // if n is true 
{ 
    'bind'; 
} 
else 
{ 
    'unbind'; 
}

所以，如果n是真的，那將評估這樣

this.buttonNext.bind((this.options.buttonNextEvent, this.funcNext))

因爲[]符號是一樣的。符號。

buttonNext[bind] is the same as buttonNext.bind

總結你貼什麼，它會檢查的變量（n和p）持有該按鈕的狀態的狀態。如果啓用，則啓用時禁用它，添加禁用的類等。如果禁用，則將其設置爲啓用並刪除禁用的類。

來源

2009-07-02 17:29:50

這兩行通過添加禁用的jcarousel-next-disabled（啓用）並將禁用的attr設置爲true/false來檢查是否顯示任何「next」或「prev」項並相應地啓用/禁用按鈕。

來源

2009-07-02 17:38:43

這些行位於採用兩個參數的方法的中間。

n // whether to show the next button 
p // whether to show the previous button

任意一個按鈕可以爲空或未定義，其導致的jCarousel看看其他因素，如轉盤是否被鎖定。

看看這個：

lock: function() { 
     this.locked = true; 
     this.buttons(); 
    }, 
    unlock: function() { 
     this.locked = false; 
     this.buttons(); 
    }

如果你看幾行從您的兩條線，你會看到this.locked被考慮設置n和p的時候都沒有正確傳入。

讓我們掰開線之一的位：

this.buttonNext[n ? 'bind' : 'unbind'](this.options.buttonNextEvent, this.funcNext)[n ? 'removeClass' : 'addClass'](this.className('jcarousel-next-disabled')).attr('disabled', n ? false : true); 

bindMethod = n ? "bind" : "unbind"; // bind if n is true; otherwise unbind 
this.options.buttonNextEvent // defaults to "click", can be changed in the options 
this.funcNext // function() { self.next(); }; // self is a local available to the closure 

changeClass = n ? "removeClass" : "addClass" // same as above 
this.className("jcarousel-next-disabled") // adds -vertical or -horizontal to the class 

toDisable = !n // Effectively

所以，這可能工作的一種方式是：

this.buttonNext.bind("click", function() { self.next(); }).removeClass("jcarousel-next-disabled-horizontal").attr("disabled", false);

和其他指出，JavaScript的支持支架和符號符號。下面的兩個是相同的：

x.y 
x["y"]

注意括號標記是一個更靈活一點：

x.omg-omg // Illegal 
x["omg-omg"] // Legal

還要注意方法只是財產查找加調用。下面的兩個是相同的：

x.omg() 
x["omg"]()

這意味着你也可以這樣做：

x[someVariable]()

田田！希望有所幫助。

來源

2009-07-02 17:44:06

條件運算

n ? 'bind' : 'unbind'

讓你任一字符串「結合」或「解除綁定」，傳遞該字符串[]操作得到你要麼jQuery的綁定或解除綁定的方法。用（）調用該方法之後的結果。實際上，第一部分是這樣的：

if (n) { 
    this.buttonNext.bind(this.options.buttonNextEvent, this.funcNext); 
} 
else { 
    this.buttonNext.unbind(this.options.buttonNextEvent, this.funcNext); 
} 
if (p) { 
    this.buttonPrev.bind(this.options.buttonPrevEvent, this.funcPrev); 
} 
else { 
    this.buttonPrev.unbind(this.options.buttonPrevEvent, this.funcPrev); 
}

bind和unbind方法都返回調用它們的jQuery集合。在這種情況下，它們將分別返回this.buttonNext和this.buttonPrev。接着用另一個[]運算符並傳遞該運算符，字符串'removeClass'或'addClass'將爲您提供removeClass或addClass jQuery方法。實際上，你現在有這個：

if (n) { 
    this.buttonNext.bind(this.options.buttonNextEvent, this.funcNext); 
    this.buttonNext.removeClass(this.className('jcarousel-next-disabled')).attr('disabled', n ? false : true); 
} 
else { 
    this.buttonNext.unbind(this.options.buttonNextEvent, this.funcNext); 
    this.buttonNext.addClass(this.className('jcarousel-next-disabled')).attr('disabled', n ? false : true); 
} 
if (p) { 
    this.buttonPrev.bind(this.options.buttonPrevEvent, this.funcPrev); 
    this.buttonPrev.removeClass(this.className('jcarousel-prev-disabled')).attr('disabled', p ? false : true); 
} 
else { 
    this.buttonPrev.unbind(this.options.buttonPrevEvent, this.funcPrev); 
    this.buttonPrev.addClass(this.className('jcarousel-prev-disabled')).attr('disabled', p ? false : true); 
}

來源

2009-07-02 17:51:47 dgvid

恕我直言，該代碼是完全不可讀的，因爲你會同意。

正如Peter寫道的，您需要知道可以使用DOT符號或BRACKET符號來調用JavaScript方法。

此外，jQuery支持鏈接。一旦你知道了這兩件事情，下面是代碼如何破解。

this.buttonNext[n ? 'bind' : 'unbind'](this.options.buttonNextEvent, this.funcNext)[n ? 'removeClass' : 'addClass'](this.className('jcarousel-next-disabled')).attr('disabled', n ? false : true);

上面的行做了三件事。綁定/取消綁定事件，添加/刪除類，並啓用/禁用'buttonNext'。

綁定/解除綁定一步
```
this.buttonNext[n ? 'bind' :'unbind'] 
    (this.options.buttonNextEvent, this.funcNext); 
```
您所呼叫的'bind'或'unbind'取決於n是true或false。更重要的是，bind方法調用將返回this.buttonNext。
addClass/removeClass步驟
```
this.buttonNext[n ? 'removeClass' : 'addClass'] 
    (this.className('jcarousel-next-disabled')) 
```
再次，基於n，它要麼調用addClass或removeClass方法傳遞給它的適當的類名稱。你得到相同的this.buttonNext對象。
最後，啓用/禁用按鈕步驟
```
this.buttonNext.attr('disabled', n ? false : true); 
```
禁用/啓用基於n是否是true或false的按鈕。

即使我喜歡鏈接，我認爲鏈接在這段代碼中被濫用。

來源

2009-07-02 18:12:16 SolutionYogi

好吧，我想把我的分享到這個話題，並告訴你最簡單的方法來禁用點擊對話框按鈕。這裏所說：

$("#dialog-selector").dialog({ 
    title: "Dialog", 
    // Other options 
    buttons: { 
     "Ок": function(e) { 
      $(e.currentTarget).attr("disabled", true); 
     } 
    } 
});

來源

2010-06-09 13:11:40 Webkadabra

幫助理解jQuery按鈕的啓用/禁用代碼

回答

相關問題