單擊其他按鈕時如何刪除標簽的類別

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:"); 因為我不知道你到底想做什么