在每個UL模塊中爲按鈕設置onClick動作jquery

我有10個（ul）模塊，它們是用$ windows.onLoad動態構建的，每個模塊中都有術語列表（li）。首先，每個塊中的一些術語必須是不可見的。我只在腳本中使用Jquery選擇器來執行所有操作。在每個UL模塊中爲按鈕設置onClick動作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它們位於

來源

2017-10-04 Johnathan Fidelio

不是那麼清楚。你是否試圖創建一個顯示特定內容的按鈕？ –

我認爲這個答案將幫助你： https://stackoverflow.com/questions/24342573/fire-ul-tag-click-event-not-li-with-jquery –

所有的李，在塊的地方按鈕定位。更清楚 - 這是一個術語字母表 - 我有28個UL-s和28個按鈕 - 所以當我按下一個按鈕時，我想看到一個特定字母（UL）上的所有單詞 –

$('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);

你質疑

來源

2017-10-04 09:07:24

哦，我的上帝，它的工作！非常感謝你，@HeidiYatom！我所做的只是寫了這個var ul = $（this）.parent（）。attr（'class'）; $（'。'+ ul +'li'）。show（）; 並沒有改變更多。還有一個問題（如果它不是很麻煩）如何使它再次隱形 - 如顯示/隱藏？ –

只需在li元素上使用toggle（）而不是show（） –

再次感謝@HeidiYatom！它運行良好。最後一個問題，也許是最簡單的 - 我點擊按鈕後 - 它確實打開塊的內容，但是當我單擊更多隱藏它 - 它隱藏，但 - 它將瀏覽器屏幕移動到底部塊。也許一些簡單的建議，以避免它？ :) –

在每個UL模塊中爲按鈕設置onClick動作jquery

回答

相關問題