jQuery: цикл итерации по пронумерованным классам?

Question

Я посмотрел на сообщение jQuery: цикл, повторяющийся через пронумерованные селекторы? , и это не решило мою проблему, и не выглядело, как будто это действительно ответ, который работает.

У меня есть список <h3> тегов, которые являются заголовками вопросов, и есть ответы ниже в <p>.Я создал классы для каждого Q & A следующим образом:

<h3 class="sec1">Question:</h3><p class="view1">Answer...</p>
<h3 class="sec2">Question:</h3><p class="view2">Answer...</p>
<h3 class="sec3">Question:</h3><p class="view3">Answer...</p>

Я использовал следующий цикл jQuery, чтобы уменьшить избыточность для своих 21 вопросов.

$(document).ready(function () {
    for (var i = 1; i < 21; i++) {
        var link = ".sec" + i;
        var content = ".view" + i;

        $(link).click(function () {
            $(content).toggle("fast");
        });
    }
});

Но он не работает длявсе наборы вопросов и ответов, только последний.то есть: это работает для первого набора, если я установил максимальное значение в 2 (только зацикливание один раз).Пожалуйста, порекомендуйте.Спасибо

Answer 1

Хотя я согласен с @gaffleck в том, что вам следует изменить свой подход, я думаю, что стоит объяснить, как исправить текущий подход.

Проблема в том, что функция щелчка не получает копиюпеременная content, но вместо этого имеет ссылку на эту же переменную.В конце цикла значение равно .view20.При щелчке любого элемента он читает эту переменную и возвращает .view20.

Самый простой способ решить эту проблему - переместить код в отдельную функцию.Переменная content в этой функции является новой переменной для каждого вызова функции.

function doIt(i){
    var link = ".sec" + i;
    var content = ".view" + i;

    $(link).click(function () {
        alert(content);
    });
}

$(document).ready(function () {
    for (var i = 1; i < 21; i++) {
        doIt(i);    
    }
});

http://jsfiddle.net/TcaUg/2/

Обратите внимание в скрипте, если вы нажимаете на вопрос, предупреждениеимеет правильный номер.При желании вы могли бы сделать функцию встроенной, хотя я считаю, что отдельная функция в большинстве случаев немного чище.

http://jsfiddle.net/TcaUg/1/

Answer 2

Гораздо более простой способ сделать это:

$(document).ready(function(){
    $("h3").click(function(){
        $(this).next("p").toggle("fast");
    });
});

Это также более безопасно, так как вы можете добавлять / удалять вопросы и ответы в будущем, и вам не придется обновлятьфункция.

Answer 3

Оберните ваши вопросы в более логичную структуру, чтобы создать правильную область для вашего блока вопросов:

<div id="questions">
  <div class="question">
    <h3 class="sec1">Question:</h3><p class="view1">Answer...</p>
  </div>
  <div class="question">
    <h3 class="sec2">Question:</h3><p class="view2">Answer...</p>
  </div>
  <div class="question">
    <h3 class="sec3">Question:</h3><p class="view3">Answer...</p>
  </div>
</div>

Теперь переберите его так:

$(function() {
  $('#questions .question h3').click(function(){
    $(this).parent().find('.answer').toggle('fast');
  });
});