添加和刪除類點擊一個動態按鈕

Question

試圖添加和刪除類點擊動態按鈕，意味着這個按鈕<button class="one"></button>獲得類動態像這樣：<button class="one text1">text1</button>
所以，如果按鈕一個有.text1類和點擊這種添加類.hide列出項目<li class="text1">像<li class="text1 show">
同爲兩個按鈕<button class="two"></button>並通過單擊添加類<li class="text2 show">

注意：當點擊按鈕二時，則應刪除類.show並添加新類.hide至按鈕一。

主要HTML：

<div id="main-id"> 
    <button class="one"></button> 
    <button class="two"></button> 
    <ul> 
     <li> 
      <!--List 1--> 
      <div class="label"> 
       <a href="#">text1</a> 
      </div> 
     </li> 
     <li> 
      <!--List 2 is Same--> 
      <div class="label"> 
       <a href="#">text1</a> 
      </div> 
     </li> 
     <li> 
      <!--List 3 is different--> 
      <div class="label"> 
       <a href="#">text2</a> 
      </div> 
     </li> 
    </ul> 
</div> 

腳本：

$('.label a').each(function() { 
    var $this=$(this);  
    $this.closest('li').addClass($this.text()); 
}); 

// Combine This 

$('button').each(function(){ 
    var liInd = 0; 
    var cl = ''; 
    var txt = ''; 
    var clses = []; 

    var ind = $('button').index($(this)) + 1; 

    $('li').each(function(){ 
     if(clses.indexOf($(this).attr('class')) === -1){ 
      clses.push($(this).attr('class')); 
      liInd = liInd + 1; 
     } 

     if(ind === liInd){ 
      cl = $(this).attr('class'); 
      txt = $(this).find('a').text(); 
      return false; //break 
     } 
    }); 

    $('button:nth-child(' + ind + ')').addClass(cl); 
    $('button:nth-child(' + ind + ')').text(txt); 
}); 

見Example on Fiddle

我已經嘗試過這種通過添加/通過點擊功能刪除類，但問題是按鈕從List項目動態獲取類，所以我不能夠定位按鈕。
任何其他方式的建議JS/Jquery？

Answer 1

這裏是一個替代的解決方案

$('button').each(function() { 
    var liInd = 0; 
    var cl = ''; 
    var txt = ''; 
    var clses = []; 

    var ind = $('button').index($(this)) + 1; 

    $('li').each(function() { 
     if (clses.indexOf($(this).attr('class')) === -1) { 
      clses.push($(this).attr('class')); 
      liInd = liInd + 1; 
     } 

     if (ind === liInd) { 
      cl = $(this).attr('class'); 
      txt = $(this).find('a').text(); 
      return false; //break 
     } 
    }); 

    if (txt != '') { 
     $('button:nth-child(' + ind + ')').addClass(cl); 
     $('button:nth-child(' + ind + ')').text(txt); 
    } 
}); 

$('button').click(function() { 
    if ($(this).attr('class')[0] == 'all') { 
     showAll(); 
     return false; // end this function 
    } 

    var allCls = $(this).attr('class').split(' '); 



    $('li').each(function() { 

     if (allCls.indexOf($(this).find('a').text()) > -1) { 
      $(this).closest('li').removeClass('show').addClass('hide'); 
     } else { 
      $(this).closest('li').removeClass('hide').addClass('show'); 
     } 
    }); 
}); 

function showAll() { 
    $('li').removeClass('hide').addClass('show'); 
} 

小提琴：https://jsfiddle.net/taleebanwar/yaLm4euk/13/

Answer 2

DEMO

$('.label a').each(function() { 
 
    var $this = $(this); 
 
    $this.closest('li').addClass($this.text()); 
 
}); 
 

 
// Combine This 
 
$('button').each(function() { 
 
    var liInd = 0; 
 
    var cl = ''; 
 
    var txt = ''; 
 
    var clses = []; 
 
    var ind = $('button').index($(this)) + 1; 
 
    $('li').each(function() { 
 
     if (clses.indexOf($(this).attr('class')) === -1) { 
 
      clses.push($(this).attr('class')); 
 
      liInd = liInd + 1; 
 
     } 
 
     if (ind === liInd) { 
 
      cl = $(this).attr('class'); 
 
      txt = $(this).find('a').text(); 
 
      return false; //break 
 
     } 
 
    }); 
 
    $('button:nth-child(' + ind + ')').addClass(cl); 
 
    $('button:nth-child(' + ind + ')').text(txt); 
 
}); 
 
$(document).on('click', 'button',function(e){ 
 
    var textClass = $.grep(this.className.split(" "), function(v, i){ 
 
     return v.indexOf('text') === 0; 
 
    }).join(); 
 
    console.log(textClass); 
 
    $('li').removeClass('show').addClass('hide') 
 
    $('li').each(function(){ 
 
    \t if($(this).hasClass($.trim(textClass))){ 
 
     \t $(this).removeClass('hide').addClass('show'); 
 
     } else { 
 
      $(this).removeClass('show').addClass('hide'); 
 
     } 
 
    }) 
 
})

.show{display:list-item;} 
 
.hide{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="main-id"> 
 
     <button class="one"></button> 
 
     <button class="two"></button> 
 
     <ul> 
 
      <li> 
 
       <!--List 1--> 
 
       <div class="label"> 
 
    <a href="#">text1</a> 
 

 
       </div> 
 
      </li> 
 
      <li> 
 
       <!--List 2 is Same--> 
 
       <div class="label"> 
 
    <a href="#">text1</a> 
 

 
       </div> 
 
      </li> 
 
      <li> 
 
       <!--List 3 is different--> 
 
       <div class="label"> 
 
    <a href="#">text2</a> 
 

 
       </div> 
 
      </li> 
 
     </ul> 
 
    </div>