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");
}
});
我只需要单击的按钮的主类,并删除先前单击的类的主类,但代码仅适用于双击按钮。
最佳答案
我认为您的逻辑比必要的要复杂得多,因为您试图通过在运行时动态更改 class
来解决问题,这意味着选择器停止工作。实现这一点的更好方法是使用委托(delegate)事件处理程序。
然后您可以按类别拆分按钮上的事件。您还可以使用 toggleClass()
修改类,并且可以定位现有的 .btn-primary
元素,以便在单击另一个类时删除该类。
另请注意,id
属性必须是唯一的。如果您需要按行为对元素进行分组,请使用类
。我删除了下面示例中的 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>
关于javascript - 单击其他按钮时如何删除标签的类别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59085594/