单击其他按钮时如何删除标签的类别

Question

html代码是：

<div style="border:1px solid black;border-radius:10px;padding:3px;">
    <a id="tblBtn" status="10" data-id="1" href="#" class="btn btn-default">10</a>
    <a id="tblBtn" status="2" data-id="2" href="#" class="btn btn-default">2</a>
    <a id="tblBtn" status="1" data-id="3" href="#" class="btn btn-default">1</a>
    <a id="tblBtn" status="3" data-id="4" href="#" class="btn btn-default">3</a>
    <a id="tblBtn" status="12" data-id="5" href="#" class="btn btn-default">12</a>
</div>

而js是：

$("body div#tablesAvailable div a").click(function () {
    var attrClass = $(this).attr("class");

    if (attrClass == "btn btn-primary") {
        $(this).attr("class", "btn btn-default");
        $("#lblTableNo").html("Table No:");
    }
    if (attrClass == "btn btn-default") {
        newno = $(this).html();
        $("#lblTableNo").html("Table No:" + newno);//replaceWith("<label id='lblTableNo'>Table No:" + newno + "</label>");
        //$("#lblTableNo").append($(this).html());
        $(this).attr("class", "btn btn-primary");
    }  
});

我只需要单击的按钮的主类，并删除先前单击的类的主类，但是代码仅适用于双击按钮。

Answer 1

我想您的逻辑比必要的要复杂得多，因为您正试图通过在运行时动态更改class来解决问题，即选择器停止工作。 一种更好的方法是使用委托事件处理程序。

然后，您可以按类别拆分按钮上的事件。 您还可以使用toggleClass()修改类，并且可以将现有的.btn-primary元素作为目标，以在单击另一个类时将其删除。

另请注意， id属性必须是唯一的。 如果需要按行为对元素进行分组，请使用class 。 我在下面的示例中删除了该id ，因为它无关紧要。 此外， status是不是一个有效的属性a元素，将意味着你的HTML是无效的。 如果要将元数据存储在元素中，请使用data属性，就像使用data-id 。 最后，将CSS放在外部样式表中，而不是内联。

话虽如此，请尝试以下操作：

 $('div').on('click', 'a.btn-primary', function() { $(this).toggleClass('btn-primary btn-default'); $("#lblTableNo").html("Table No:"); }); $('div').on('click', 'a.btn-default', function() { $('a.btn-primary').add(this).toggleClass('btn-primary btn-default'); $("#lblTableNo").html("Table No:" + $(this).html()); }); 

 .btn-container { border: 1px solid black; border-radius: 10px; padding: 3px; } .btn { margin: 5px; padding: 5px; border: 1px solid #888; display: inline-block; border-radius: 10px; min-width: 20px; text-align: center; background-color: #CCC; text-decoration: none; } .btn-primary { color: #EEE; background-color: #C00; border-color: #C00; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="btn-container"> <a data-status="10" data-id="1" href="#" class="btn btn-default">10</a> <a data-status="2" data-id="2" href="#" class="btn btn-default">2</a> <a data-status="1" data-id="3" href="#" class="btn btn-default">1</a> <a data-status="3" data-id="4" href="#" class="btn btn-default">3</a> <a data-status="12" data-id="5" href="#" class="btn btn-default">12</a> </div> <div id="lblTableNo"></div> 

Answer 2

您不能有重复的ID，因此，如果您只是想切换btn-primary类，请尝试使用公共类名。 试试这个解决方案

 $("a.btn-default").off().on('click', function() { $("a.btn-default").removeClass('btn-primary'); $(this).addClass('btn-primary'); }); 

 .btn-primary { color: green; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="border:1px solid black;border-radius:10px;padding:3px;"> <a status="10" data-id="1" href="#" class="btn btn-default">10</a> <a status="2" data-id="2" href="#" class="btn btn-default">2</a> <a status="1" data-id="3" href="#" class="btn btn-default">1</a> <a status="3" data-id="4" href="#" class="btn btn-default">3</a> <a status="12" data-id="5" href="#" class="btn btn-default">12</a> </div> 

我没有提到您的其他代码，例如$("#lblTableNo").html("Table No:"); 因为我不知道你到底想做什么