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

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>

And the js is:

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

我只需要获取被点击按钮的主要类(primary class)，并移除先前点击的按钮上的主要类，但该代码仅适用于双击按钮。

- Rupak

---

ID必须唯一。 - Aksen P

你可以使用 classList.remove("你的类名") 来检查类并删除包含你要查找的内容的任何一个。classList 返回一个数组。 - Afia

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>

- Rory McCrossan

---

它可以工作，但没有声望来标记答案为有用。 - Rupak

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:");，因为我不确定你试图做什么。

- Sushil