为每个 UL 块中的按钮设置 onClick 动作 Jquery

Question

我有 10 个 (ul) 块，它们是用 $windows.onLoad 动态构建的，在每个块中我都有术语列表 (li)。每个块中的某些术语最初必须是不可见的。我只在脚本中使用 Jquery 选择器执行所有操作。

window).load(function () {
            $.ajax({
                url: '@controllers.blog.routes.BlogController.allBlogTerms()',
                type: 'get',
                success: function (terms) {

                    var urlPrefix = "@translateUrl(controllers.blog.routes.BlogController.termItem("").url)";
                    for (var l = 0; l < terms.length; l++) {
                        $('.list_of_terms').append('<div class="item col-md-4">\
                                <div class="inner_item">\
                                <div class="capital">\
                                ' + terms[l].letter + '\
                                </div>\
                                <ul class="ul' + l + '">\
                                </ul>\
                                </div>\
                                </div>\
                                <div class="clearfix"></div>');
                        for (var t = 0; t <= terms[l].terms.length - 1; t++) {
                            if (t > 5)
                                $('.ul' + l).append('<li style="display:none;"><a href="' + urlPrefix + terms[l].terms[t].url + '">' + terms[l].terms[t].title + '</a></li>');
                            else
                                $('.ul' + l).append('<li><a href="' + urlPrefix + terms[l].terms[t].url + '">' + terms[l].terms[t].title + '</a></li>');
                        }

所以我在这个块上创建了一个按钮来管理其中列表的可见性。但是我在将每个按钮与每个块耦合时遇到了问题。当我在某个块上按它时 - 它在所有块中显示 'li' 的内容。

 $.fn.myFunc = function() {

                                $('li').show();
                        };


                        $('.ul' + l).append('<button type="button" onclick="$(this).myFunc(????);">Canada</button>');

当我尝试传递参数 "l"（即块数）时，它无法在范围内识别它（现在是问号）。那么我如何参数化我的按钮，以便它们只能作用于它们所在的 UL

Answer 1

$('li').show();

将显示页面上的所有 li 元素。

希望这个例子对你有所帮助：

<body>
    <ul class='ul1'>
      <li>Argentina</li>
      <li>Albania</li>
      <li>Australia</li>
    </ul>

    <ul class='ul2'>
     <li>Belgium</li>
     <li>Bangladesh</li>
     <li>Bahrain</li>
   </ul>
 </body>
 <script type="text/javascript">
    // the button click event handler
    function showItems(){
      // get the class attribute of the ul element 
      // (assuming it has 1 class only):
      var ul = $(this).parent().attr('class');

      // create a selector using the id of the ul $(.ul1 li), $(.ul2 li):
      $('.'+ul+' li').show();
    }

    // add buttons to the lists:
    $('.ul1').prepend('<button type="button" class="btn">A</button>');
    $('.ul2').prepend('<button type="button" class="btn"">B</button>');
    $('li').hide();

    // bind the showItems click event handler to the buttons:
    $(document).on('click', '.btn', showItems);

为每个 UL 块中的按钮设置 onClick 动作 Jquery

Set onClick action for button in each UL block Jquery

javascript

jquery

html

css