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

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

同样的东西，但带有括号符号。我们不直接使用符号名称，而是使用字符串文字。这意味着通过使用括号符号解析符号，我们可以以动态的方式进行，因为我们可以动态选择或构建字符串，这正是 sn-p 所做的。

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

类似于

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

如果您不认识 ?: 语法，那就是 conditional operator 或条件表达式

[expression] ? [valueIfTrue] : [valueIfFalse]

这通常被错误地称为“三元运算符”，而实际上它只是 a 三元运算符（具有三个操作数的运算符）。这样做的原因是因为在 javascript（和大多数语言）中是 only 三元运算符，所以描述通常很苍白。

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

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

如果你从你的两行中向上看几行，你会发现 this.locked 被考虑用于设置 n 和 p 当它们没有被传入为 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 支持括号和符号表示法。以下两个是相同的：

x.y
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 绑定或取消绑定方法。在该结果之后使用 () 调用该方法。实际上，第一部分就像：

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

这两行检查是否有任何“下一个”或“上一个”项目要显示，并通过添加 disabled jcarousel-next-disabled(enabled) 并将 disabled attr 设置为 true/false 来相应地启用/禁用按钮。

Answer 6

好的，伙计们，我想把我的分享带到这个话题上，并告诉你禁用单击对话框按钮的最简单方法。如下：

$("#dialog-selector").dialog({
    标题：“对话”，
    // 其他选项
    纽扣： {
        “Ок”：函数（e）{
            $(e.currentTarget).attr("禁用", true);
        }
    }
});

Answer 7

恕我直言，您会同意该代码完全不可读。

正如 Peter 所写，您需要知道 JavaScript 方法可以使用 DOT 表示法或 BRACKET 表示法来调用。

另外，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 禁用/启用按钮。

尽管我喜欢链接，但我认为链接在这段代码中被滥用了。