Помогите разобрать код jQuery
 

Добрый день.

Есть один пример страницы на jQuery. Не могу понять и к тому же найти описание данного метода в учебниках по JS и jQuery.

Вот кусок html, который связан с кодом jQ.

<div class="panel box">
<h2>Test Subjects</h2>

<div class="test-subjects clearfix">
<div class="test-subject">bla-bla</div>
<div class="test-subject"><img src="images/limes.png" alt=""/>
</div>
<div class="test-subject">bla-bla.</div>
<div class="test-subject"><img src="images/belt.png" alt=""/>
</div>
</div>

</div>
у нас есть 4 элемента div с классом "test-subject".
в коде собираем набор этих элементов в переменной:
var $testSubjects = $('.test-subject');

далее есть обработчик нажатия на кнопку, который переменной effect присваивает одно из значении: 'show', 'hide', 'toggle'.
это строковые значения.

теперь сам не понятный кусок кода:
if ((effect === 'show' || effect === 'hide' || effect === 'toggle') && speed === 'none') {
$testSubjects[effect]();
}

мне не понятен вызов: $testSubjects[effect]();
по результату работы кода я понял, что данный вызов означает следующее:
для всех элементов из набора $testSubjects применить метод show(), если effect==='show', или метод hide(), если effect==='hide'.

не в одной документации не нашел описание данного метода вызова методов high и тд.

строку $testSubjects[effect](); заменил на ниже указанный код и получил этот же результат для show и hide. этот подход мне более понятен чем $testSubjects[effect]()

$testSubjects.each(function(){
if (effect === 'show') {
$(this).show();
} else {
if (effect === 'hide') {
$(this).hide();
}
}
});

Если кто знает и может дать ссылку на описание такой оптимизации кода вышлите пожалуйста.
Спасибо.

А так было бы понятно?

var fun = {
    one: function() {
        alert(1)
    },
    two: function() {
        alert(2)
    },
    three: function() {
        alert(3)
    }
},
run = 'two';

if(run == 'one' || run == 'two' || run == 'three') fun[run]();

Добрый день,

конечно, так намного понятнее.
просто мне интересно как работает $testSubjects[effect]();
мы ведь явно не определяли объект $testSubjects с его свойствами show, hide. где и как это происходит.

Благодарю за Ваш ответ.

Добрый день,

конечно, так намного понятнее.
просто мне интересно как работает $testSubjects[effect]();
мы ведь явно не определяли объект $testSubjects с его свойствами show, hide. где и как это происходит.

Благодарю за Ваш ответ.

Эти три метода уже определены в самой библиотеке jQuery.

Добрый вечер,

просто не видно явно, как они (show() & hide()) связались с $testSubjects[effect]();
хорошо, вместо effect мы подставляем show, т.е. $testSubjects[show](), но мы нигде не определяем объект $testSubjects в виде:
$testSubjects{
show: function(){show();}
}
единственное место, где определен $testSubjects:
var $testSubjects = $('.test-subject');

Спасибо.

$testSubjects.show() === $testSubjects['show']()

ваша переменная $testSubjects - уже определена в библиотеке jq как шаблонный html object и для этого объекта уже существует готовый метод .show() запускаемый как функция. Вы подставили на место этого объекта -> $() свою переменную. var $testSubjects = $('.test-subject');

Добрый день,
благодарю за ответ.