如何编写一个处理多个类动作的函数答案

【问题标题】：How to write one function that handles multiple classes actions如何编写一个处理多个类动作的函数
【发布时间】：2020-05-01 14:02:14
【问题描述】：

我创建了多行，左侧有一个箭头按钮，右侧有一个标题。箭头本身是一个带有背景图像的跨度，代表两种状态：打开、关闭（旋转 45 度的三角形） . 在它下面，我隐藏了段落。单击箭头时，跨度背景（箭头-三角形）的背景位置会发生变化，因此看起来列表展开了。段落变得可见。为了处理相同模式的多行（跨度（箭头）、标题、隐藏段落），我动态定义使用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')
    }

.等等。如您所见，我必须编写大量相同的代码才能对每个文本行执行相同的操作。如何编写一个函数来自动处理每个列表行？谢谢！

【问题讨论】：

标签： php jquery

【解决方案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)
    } 
}

【讨论】：