Question

我有一个简单的页面，有四张卡片（Divs），每张卡片都有一个按钮。我已经写了一些jquery希望当我点击按钮时我可以更改课程＆amp;按钮的文本...并在我继续单击它们时在两种状态之间切换。

我的下面的代码似乎完全适用于第一个按钮......但不是任何其他按钮。

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    <script>
        $(document).ready(function() {

            $("#un_btn").click(function() {
                if ($(this).attr('class') == 'btn_s') {
                    $(this).html('Undo?');
                    $(this).removeClass('btn_s');
                    $(this).addClass('notsu');
                } else {
                    $(this).html('Mark as not suitable?');
                    $(this).removeClass('notsu');
                    $(this).addClass('btn_s');
                }
            });
        });
    </script>

</head>

<body>
    <div class="card">
        <p>Card 1</p>
        <button class="btn_s" id="un_btn">Mark as not suitable?</button>
    </div>

    <div class="card">
        <p>Card 2</p>
        <button class="btn_s" id="un_btn">Mark as not suitable?</button>
    </div>

    <div class="card">
        <p>Card 3</p>
        <button class="btn_s" id="un_btn">Mark as not suitable?</button>
    </div>

    <div class="card">
        <p>Card 4</p>
        <button class="btn_s" id="un_btn">Mark as not suitable?</button>
    </div>

</body>

</html>

我做错了什么？如何在每个相应的div（卡）内的每个按钮上进行切换？

Answer 1

ID应为唯一使用类代替类似元素。
使用hasClass检查某个元素是否包含某个类，而不是使用attr('class')
可以链接同一元素上的方法addClass，removeClass和html。
addClass可以与两个类一起使用，而不是removeClass和toggleClass。

Demo

$(document).ready(function() {

  // Bind click event on all the buttons inside .card
  $(".card button").click(function() {
    
    // Check if the clicked button has class `btn_s`
    if ($(this).hasClass('btn_s')) {
      $(this).html('Undo?').toggleClass('btn_s notsu');
    } else {
      $(this).html('Mark as not suitable?').toggleClass('notsu btn_s');
    }
  });
});

.notsu {
  color: red;
}
.btn_s {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">
  <p>Card 1</p>
  <button class="btn_s">Mark as not suitable?</button>
</div>

<div class="card">
  <p>Card 2</p>
  <button class="btn_s">Mark as not suitable?</button>
</div>

<div class="card">
  <p>Card 3</p>
  <button class="btn_s">Mark as not suitable?</button>
</div>

<div class="card">
  <p>Card 4</p>
  <button class="btn_s">Mark as not suitable?</button>
</div>

Answer 2

您正在检查您的jquery中的Id名称而不是Class。你应该真的没有Id是相同的，因为它会导致这样的问题。

如果您更改了该行：

$("#un_btn").click(function(){

与

$(".btn_s").click(function(){

这很好用。

Here是使用此更改的JsFiddle

Answer 3

点击适用于渲染元素。由于您要动态添加元素，因此必须使用on。看起来您正在动态添加此元素，因此您需要使用委托的事件侦听器：

修改您的代码

 $("#un_btn").click(function() {}); to 

 $(document).on('click', "your selector", function() { });

选择器可以是class或Id。 .btn_s或#un_btn

单击Jquery更改按钮

3 个答案: