Question

我只是想知道我是否可以将这个重复的javascript代码缩小，因为我最终会得到很多列表，但每个链接的内容都不同。 https://jsfiddle.net/sandiie/zma424f8/

$(document).ready(function(){
   $( '.none' ).hide();
   $('.b01').click(function(){
   var list_new = $('#list_new01').html();
   $('#list').empty().append(list_new);
       $( '.b01' ).hide();
});

$( '.none' ).hide();
   $('.b02').click(function(){
   var list_new = $('#list_new02').html();
   $('#list').empty().append(list_new);
       $( '.b02' ).hide();
   });

});

<ul id="list">
    <li class="b01"><a href="#">Blah1</a></li>
    <li class="b02"><a href="#">Blah2</a></li>
    <li class="b03"><a href="#">Blah3</a></li>
</ul>
<ul id="list_new01" class="none">
    <li><a href="#">Blah1-01</a></li>
    <li><a href="#">Blah1-02</a></li>
</ul>

<ul id="list_new02" class="none">
    <li><a href="#">Blah2-01</a></li>
    <li><a href="#">Blah2-02</a></li>
</ul>

Answer 1

似乎不需要两次调用$( '.none' ).hide();。

由于这是相同类型的功能，因此为click函数的每个元素添加相同的类。然后你想把它与列表匹配，一种方法是通过匹配属性来选择它。

$(document).ready(function(){

    // it might be better to set this in your css with display:none
    $('.none').hide();

    $('.b a').click(function(){
        var id = $(this).attr('id');
        var list_new = $('ul.' + id).html();
        $('#list').empty().append(list_new);
        $(this).parents('li').hide();
    });

});

我也更新了您的HTML，您可以在小提琴中查看，但这是个主意。

https://jsfiddle.net/zma424f8/2/

干净的重复JavaScript代码

1 个答案: