添加和删​​除类以单击动态按钮 [英] Add and Remove class to click a dynamic Button

问题描述

尝试添加和删除类以单击动态按钮，表示此按钮<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">

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

注意:当单击第二个按钮时，应删除类.show并向第一个按钮添加新的类.hide.

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

主要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);
});

请参见小提琴上的示例

我已经通过单击功能通过添加/删除类来尝试了此操作，但是问题是Buttons从List项目中动态获取类，因此我无法定位按钮.
关于 JS/Jquery 的其他方法的建议吗?

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?

推荐答案

这是替代解决方案

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

这篇关于添加和删​​除类以单击动态按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！