帮助理解jQuery按钮启用/禁用代码

我抓住了这个代码formsJCarousel，并试图理解下面的这些行。 我是jQuery的新手，并不是那么擅长JavaScript所以我不确定什么是jQuery，哪个是JavaScript

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来设置状态，并启用或禁用其中的按钮但我想在我真正理解它之后修改它。 我只是无法弄清楚它正在做什么100％。

试图理解诸如[n？ ‘bind’：’unbind’]而且这里也只是链接。 这四行中有很多事情要发生。

代码来自这个插件： http ： //sorgalla.com/projects/jcarousel/

Answer 1

要理解的第一部分是符号解析。 Javacript支持点符号和括号表示法。

考虑打开一个新窗口。

 window.open() 

这是点符号。 你告诉翻译你可以在“窗口”找到“打开”。 但还有另一种方法可以做到这一点

 window['open']() 

同样的事情，但用括号表示法。 我们不是直接使用符号名，而是使用字符串文字。 这意味着通过使用括号符号进行符号解析，我们可以动态地进行，因为我们可以动态选择或构建字符串，这正是这个代码片段的作用。

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

是分析的

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

如果您不识别？：语法，那就是条件运算符或条件表达式

 [expression] ? [valueIfTrue] : [valueIfFalse] 

这通常被错误地称为“三元运算符”，而实际上它只是一个三元运算符（具有三个操作数的运算符）。 这是因为在javascript（和大多数语言）中是唯一的三元运算符，因此描述通常过得很快。

这有帮助吗？ 还有什么需要清理吗？

Answer 2

这些行位于带有两个参数的方法的中间。

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

这些按钮中的任何一个都可以为null或未定义，这会导致jCarousel查看其他因素，例如旋转木马是否被锁定。

看看这个：

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

如果从两行看起来几行，你会发现当没有传入时，设置n和p时会考虑this.locked为true。

让我们稍微分开其中一条线：

 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支持括号和符号表示法。 以下两个是相同的：

 xy x["y"] 

请注意，括号表示法更灵活一些：

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

另请注意，方法只是属性查找和调用。 以下两个是相同的：

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

这意味着你也可以这样做：

 x[someVariable]() 

田田！ 希望有所帮助。

Answer 3

 [n ? 'bind' : 'unbind'] 

是一个if语句，可以重写为

 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）的状态。 如果它已启用，则在激活时会禁用它，添加禁用的类等。如果禁用它，它会将其设置为启用并删除已禁用的类。

Answer 4

条件操作

 n ? 'bind' : 'unbind' 

获取字符串’bind’或’unbind’，将该字符串传递给[]运算符获取jQuery bind或unbind方法。 使用（）调用该方法后面的结果。 实际上，第一部分就像：

 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); } 

Answer 5

这两行检查是否有要显示的“next”或“prev”项目，并通过添加禁用的jcarousel-next-disabled（启用）并将disabled attr设置为true / false来相应地启用/禁用按钮。

Answer 6

好的，我想把我的分享带到这个主题，并告诉你关于禁用点击对话框按钮的最简单方法。 开始：

  $（ “＃对话框，选择”）。对话框（{
    标题：“对话”，
     //其他选项
    纽扣： {
         “Ок”：function（e）{
             $（e.currentTarget）.attr（“disabled”，true）;
         }
     }
 }）; 

Answer 7

恕我直言，这个代码是完全不可读的，因为你会同意。

正如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’。

1. 绑定/解除绑定步骤

    this.buttonNext[n ? 'bind' :'unbind'] (this.options.buttonNextEvent, this.funcNext); 

   您正在调用'bind'或'unbind'具体取决于n是true还是false 。 更重要的是， bind方法调用将返回this.buttonNext 。

2. addClass / removeClass步骤

    this.buttonNext[n ? 'removeClass' : 'addClass'] (this.className('jcarousel-next-disabled')) 

   同样，基于n ，它将调用addClass或removeClass方法，并为其传递适当的类名。 你得到了相同的this.buttonNext对象。

3. 最后，启用/禁用按钮步骤

    this.buttonNext.attr('disabled', n ? false : true); 

   根据n是true还是false禁用/启用按钮。

即使我喜欢链接，我认为链接在这段代码中被滥用了。