Add and Remove class to click a dynamic Button

问题

Trying to Add and Remove class to click dynamic Buttons, means this button <button class="one"></button> get class dynamically like this: <button class="one text1">text1</button>
So if button one has class .text1 and by click this add class .hide to list item <li class="text1"> like <li class="text1 show">
Same for button two <button class="two"></button> and by click add class <li class="text2 show">

Note: when click button two, then should remove class .show and add new class .hideto button one.

Main 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>

Script:

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

See Example on Fiddle

I have tried this by add/remove class by click function, but problem is Buttons get class dynamically from List items, so I'm not able to target button.
Any suggestion for other way to do this by JS/ Jquery?

回答1:

Here is an alternative solution

$('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/

回答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(){
    	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>

来源：https://stackoverflow.com/questions/32163672/add-and-remove-class-to-click-a-dynamic-button