添加和删除 class 以单击动态按钮

Question

尝试添加和删除 class 以单击动态按钮，意味着此按钮 <button class="one"></button> 会像这样动态地获得 class：<button class="one text1">text1</button>
所以如果 按钮一个 有 class .text1 并且通过单击添加 class .hide 列出项目 <li class="text1"> 喜欢 <li class="text1 show">
按钮二 <button class="two"></button> 相同，然后单击添加 class <li class="text2 show">

注意：当点击按钮二时，应该移除class .show并添加新的class .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

我已经通过点击功能 add/remove class 尝试了这个，但问题是按钮从列表项中动态获取 class，所以我无法定位按钮。
JS/Jquery 对其他方法有什么建议吗？

Answer 1

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(){
     if($(this).hasClass($.trim(textClass))){
         $(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>

Answer 2

这是一个替代解决方案

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

Fiddle: https://jsfiddle.net/taleebanwar/yaLm4euk/13/

添加和删除 class 以单击动态按钮

Add and Remove class to click a dynamic Button

html

javascript

jquery

addclass

removeclass

添加和删​​除 class 以单击动态按钮

Add and Remove class to click a dynamic Button

html

javascript

jquery

addclass

removeclass

添加和删除 class 以单击动态按钮