jQuery множественные селекторы как переменные

Question

Мне нужна помощь с несколькими селекторами jQuery. Я понимаю, как он работает и использовал его, но мне нужно использовать его так, чтобы имена элементов не были в функции. (Они пропускают, как переменные, связанные с ними быть создан динамически)

Вот пример того, что у меня есть:

function openBox(row) { 
    var rowInfo = '#info' + row; 
    var rowClose = '#close' + row; 
    var rowNumber = '#number' + row; 
    $(rowInfo).slideDown('slow'); 
    $(rowClose).slideDown('slow'); 
    $(rowNumber).slideDown('slow'); 
} 

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

Пример того, что я хочу:

function openBox(row) { 
    var rowInfo = '#info' + row; 
    var rowClose = '#close' + row; 
    var rowNumber = '#number' + row; 
    $(rowInfo, rowClose, rowNumber).slideDown('slow'); 
} 

Возможно ли это? К сожалению, их документация не вникает в прохождение чего-либо, кроме элементов html. source

Answer 1

Вы можете использовать группу селекторов:

function openBox(row) { 
    var rowInfo = '#info' + row; 
    var rowClose = '#close' + row; 
    var rowNumber = '#number' + row; 
    $(rowInfo + ", " + rowClose + ", " + rowNumber).slideDown('slow'); 
} 

или метод add:

function openBox(row) { 
    var rowInfo = '#info' + row; 
    var rowClose = '#close' + row; 
    var rowNumber = '#number' + row; 
    $(rowInfo) 
     .add(rowClose) 
     .add(rowNumber) 
     .slideDown('slow'); 
} 

---

Оба они могут быть более краткими, конечно:

function openBox(row) { 
    $('#info' + row + ", #close" + row + ", #number" + row).slideDown('slow'); 
} 

или add метод:

function openBox(row) { 
    $('#info' + row) 
     .add('#close' + row) 
     .add('#number' + row) 
     .slideDown('slow'); 
} 

---

Но, возможно, было бы целесообразно, чтобы дать все эти элементы общего класса на основе row?

<div id="infoX" class="rowX">...</div> 
<div id="closeX" class="rowX">...</div> 
<div id="numberX" class="rowX">...</div> 

Тогда это будет:

function openBox(row) { 
    $(".row" + row).slideDown("slow"); 
} 

Answer 2

Вы можете объединить строки для создания селекторной строки;

var selector = [rowInfo, rowClose, rowNumber].join(','); 
$(selector).slideDown('slow'); 

Или, Вы можете использовать .add() к группе, то в объекте JQuery

$(rowInfo).add(rowClose).add(rowNumber).slideDown('slow'); 

Answer 3

Вы также могли бы избежать многократного переменной и использовать массив, который вы изменить с картой, а затем присоединиться с , создать строку несколько селекторов для JQuery. Поэтому, если вам нужно добавить еще id s в список, вы просто добавили их в одно место

function openBox(row) { 
    var targets = ['#info', '#close', '#number'].map(v=>v+row).join(','); 
    $(targets).slideDown('slow'); 
}