Question

我抓住了这个代码形式JCarousel，并试图理解下面的这些行。我是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来设置状态，启用或禁用a中的按钮，但是我想要修改它一旦我真正理解它。我无法确切地知道它正在做什么100％。

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

代码来自此插件：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(...);
}

如果你不认识？：语法，那就是conditional operator或条件表达式

[expression] ? [valueIfTrue] : [valueIfFalse]

这经常被错误地称为“三元运算符”，实际上它只是一个三元运算符（一个有三个操作数的运算符）。原因是因为在javascript（和大多数语言）中只有三元运算符，所以描述通常都是苍蝇。

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

Answer 2

[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 3

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

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。

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

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]()

多田！希望有所帮助。

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来相应地启用/禁用按钮。 / p>

Answer 6

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

正如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来停用/启用按钮。

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

Answer 7

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

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

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

7 个答案: