Как написать одну функцию, которая обрабатывает действия нескольких классов

Question

Я создал несколько строк с кнопкой со стрелкой слева и заголовком справа от нее. Сама стрелка представляет собой промежуток с фоновым изображением, представляющим два состояния: открыто, близко (треугольник, повернутый на 45 градусов) , Под этим я скрываю абзац. При щелчке на стрелке фоновая позиция фона диапазона (стрелка-треугольник) изменяется так, что выглядит как раскрывающийся список. И абзац становится видимым. Для обработки нескольких строк одной и той же схемы (span (стрелка), заголовок, скрытый абзац) я динамически определяю класс, заголовок и абзац, используя php:

 <?php function faq($num,$quest,$answer){
echo "<div class='freqlist'>
            <span class='arrowlist$num'></span>
            <h2>$quest</h2>
            <p class='hideans hideans$num'>$answer</p>
        </div>"
  ?>

, затем редактирую html, чтобы добавить текст строки для сворачивания-разворачивания списка:

<section>
    <div class="container">
        <?php faq('1','Вопросы','Ответы')?>
        <?php faq('2','Приветы','Котлеты')?>
        <?php faq('3','От Боси','Лапососи')?>
        <?php faq('4','К Полинке','И Владосе')?>
        <?php faq('5','С приветом','Мы на радость')?>
        <?php faq('6','Бока','Отлежав')?>
        <?php faq('7','Мы тут кодим','Не спавши')?>
        <?php faq('8','Эту повесть','Напесавши')?>
    </div>
</section>

, затем jquery, чтобы сделать заголовок развернутым, щелкнуть, показать абзац и повернуть стрелку; и снова нажмите на кнопку:

$(document).ready(function(){
    /*block of show/hide pars*/
    $ind=0;
    $('.arrowlist1').click(function(){if($ind==0){showlist1()}else{hidelist1()}});      
    function showlist1(){
        $('.arrowlist1').css('background-position', '-9px -65px');$ind=1;
        $('.hideans1').show('400');
    }
    function hidelist1(){
        $('.arrowlist1').css('background-position', '-4px -8px');$ind=0;
        $('.hideans1').hide('400')
    }     


     $('.arrowlist2').click(function(){if($ind==0){showlist2()}else{hidelist2()}});     
    function showlist2(){
        $('.arrowlist2').css('background-position', '-9px -65px');$ind=1;
        $('.hideans2').show('400');
    }
    function hidelist2(){
        $('.arrowlist2').css('background-position', '-4px -8px');$ind=0;
        $('.hideans2').hide('400')
    }       

.et c. Как вы видите, я должен написать тонны одного и того же кода, чтобы выполнить одно и то же действие для каждой текстовой строки. Как я могу написать одну функцию для автоматической обработки каждой из строк списка? Спасибо!

Answer 1

Заставьте showList() и hideList() принять число и использовать его, чтобы определить, какие .arrowlist<n> и .hideans<n> показать / скрыть:

function showlist(n){
    $('.arrowlist' + n).css('background-position', '-9px -65px');
    $('.hideans' + n).show('400');
}
function hidelist(n){
    $('.arrowlist' + n).css('background-position', '-4px -8px');
    $('.hideans' + n).hide('400')
}

Используйте его следующим образом:

$('.arrowlist1').click(function(){toggleList(1)});

И функция toggleList():

function toggleList(n) {
    if ( $('.hideans' + n).is(":visible") ) {
        hideList(n)
    } else {
        showList(n)
    } 
}