gpt4 book ai didi

javascript - 我想使用 javascript 为引导按钮动态显示徽章编号

转载 作者:太空宇宙 更新时间:2023-11-04 07:11:48 25 4
gpt4 key购买 nike

在 CSS 中,虽然我将徽章编号指定为 0,但它应该由 jQuery/JavaScript 动态更改。以下代码我试过但没有用:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body onload='preventDefault()'>
<div class="container">
<button class="btn btn-sm btn-default like-btn active" type="button" id="10">
<span class="text">Alert</span>
<span class="badge like-badge">0</span>
</button>
</div>
<script>
preventDefault = function(){
var btnText = $(this).find(".btn-text")
var badge = $(this).find(".like-badge")
var count = parseInt(badge.text());
if ($(this).hasClass('active')) {
btnText.text("Like");
badge.text(2);
$(this).removeClass('active');
}
else {
btnCaption.text("Liked");
badge.text(count + 1);
$(this).addClass('active');
}
}
</script>
</body>
</html>

最佳答案

我已经更正了一些代码片段..

<button class="btn btn-sm btn-default like-btn active" onclick="preventDefault()" type="button" id="10">
<span class="btn-text">Alert</span>
<span class="badge like-badge">0</span>
</button>

为按钮文本添加了 btn-text

javascript 更正:

preventDefault = function(){
var btn = $('.btn');
var btnText = $(this).find(".btn-text")
var badge = $(".like-badge");
var count = parseInt(badge.text());
console.log(count);

if (btn.hasClass('active')) {
btnText.text("Like");
badge.text(2);
btn.removeClass('active');
}else {
btnText.text("Liked");
badge.text(count + 1);
btn.addClass('active');
}
}

添加了 var btn = $('.btn'); 用于选择按钮元素。

if 条件下调用 btn 而不是 $(this)

欢呼!!代码对我有用。请检查它是否令您满意。

关于javascript - 我想使用 javascript 为引导按钮动态显示徽章编号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51110155/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com