Помогите понять jQuery кнопку включения / выключения кода

Question

Помогите понять jQuery кнопку включения / выключения кода

Я взял этот код формы 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 для установки состояния и либо включение, либо отключение кнопки, которая находится в, но я хочу изменить это, как только я действительно пойму это. Я просто не могу разобрать, что именно он делает на 100%.

Пытаясь понять такие вещи, как [п? 'bind': 'unbind'] и просто цепочка здесь тоже. В этих 4 строках много чего происходит.

Код взят из этого плагина: http://sorgalla.com/projects/jcarousel/

3

javascript jquery

Источник

user93468 02 июл '09 в 17:22

7 ответов

Решение

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

2

Источник

user120226 02 июл '09 в 17:29

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

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, когда они не передаются как 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]()

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

2

Источник

user122162 02 июл '09 в 17:44

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

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' возвращает вам метод jCuery removeClass или addClass. По сути, теперь у вас есть это:

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

1

Источник

user9897 02 июл '09 в 17:51

ИМХО, этот код совершенно не читается, как вы согласитесь.

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

Шаг Bind/unbind
```
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,

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

0

Источник

user92414 02 июл '09 в 18:12

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

0

Источник

user131975 02 июл '09 в 17:38

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

$ ("Диалог-селектор #"). Диалог ({
    название: "Диалог",
    // Другие опции
    кнопки: {
        "Ок": function(e) {
            $(e.currentTarget).attr("отключено", true);
        }
    }
});

0

Источник

user360292 09 июн '10 в 13:11

Другие вопросы по тегам javascript jquery

user8815 02 июл '09 в 17:38 2009-07-02 17:38 · Accepted Answer · 2009-07-02 17:38

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

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

window.open()

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

window['open']()

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

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

Является аналогом

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

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

[expression] ? [valueIfTrue] : [valueIfFalse]

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

Это помогает? что-нибудь еще нужно прояснить?