Справка о включении/отключении кнопки jQuery

Ответ 1

Первая часть для понимания - это разрешение символа. Javacript поддерживает как точечные обозначения, так и скобки.

Рассмотрите возможность открытия нового окна.

window.open()

Это точка-обозначение в действии. вы говорите интерпретатору, что "открыть" можно найти в "окне". Но есть еще один способ сделать это

window['open']()

То же самое, но с условным обозначением. Вместо того, чтобы использовать имя символа напрямую, вместо этого мы используем строковый литерал. Это означает, что, используя привязку к символу для разрешения символа, мы можем сделать это динамически, поскольку мы можем выбирать или строить строки "на лету", что и делает этот фрагмент.

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

Аналогичен

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

Если вы не распознаете синтаксис?: условный оператор или условное выражение

[expression] ? [valueIfTrue] : [valueIfFalse]

Это чрезвычайно часто ошибочно называют "тройным оператором", когда на самом деле это всего лишь тройной оператор (оператор с тремя операндами). Причина этого в том, что в javascript (и большинстве языков) есть единственный троичный оператор, так что описание обычно летает.

Помогает ли это? есть ли что-нибудь еще, что вам нужно прояснить?

Ответ 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)  который содержит состояние кнопки. Если он включен, то при активации он отключает его, добавляет отключенные классы и т.д. Если он отключен, он устанавливает его для включения и удаляет отключенный класс.

Ответ 3

Эти строки находятся в середине метода, который принимает два параметра.

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

Любая из этих кнопок может быть нулевой или undefined, что заставляет 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]()

Тада! Надеюсь, что это помогло.

Ответ 4

Условная операция

n ? 'bind' : 'unbind'

получает либо строку "bind", либо "unbind", передавая эту строку оператору [], вы получаете либо метод привязки jQuery, либо метод 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);
}

Ответ 5

Эти две строки проверяют, есть ли какие-либо элементы "next" или "prev" для отображения и включения/выключения кнопок соответственно путем добавления отключенного jcarousel-next-disabled (включено) и установки отключенного attr на true/false.

Ответ 6

IMHO, этот код полностью нечитабелен, как вы бы согласились.

Как писал Питер, вам нужно знать, что метод 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);

Вышеупомянутая строка делает три вещи. Binds/Unbinds, добавляет/удаляет класс и включает/отключает 'buttonNext'.

• Шаг привязки/развязки

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

  Вы вызываете 'bind' или 'unbind' в зависимости от того, является ли n true или false. Что еще более важно, вызов метода bind возвращает this.buttonNext.

• addClass/removeClass step

  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.

Несмотря на то, что я люблю цепочку, я думаю, что цепочка была неправильно использована в этом коде.

Ответ 7

Хорошо, ребята, я хотел бы привести свою долю в эту тему и рассказать вам о самом простом способе отключить нажатую кнопку диалога. Здесь:

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