单击时Jquery更改按钮答案

【问题标题】：Jquery change button on click单击时Jquery更改按钮
【发布时间】：2016-02-06 01:21:22
【问题描述】：

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

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

<!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（卡）中的每个按钮上工作？

【问题讨论】：

标签： jquery class button click

【解决方案1】：

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

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>

【讨论】：

【解决方案2】：

Click 对渲染的元素效果很好。由于您是动态添加元素，因此您必须为此使用on。看起来您正在动态添加此元素，因此您需要使用委托事件侦听器：

修改你的代码

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

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

选择器可以是类或 ID。 .btn_s 或 #un_btn

【讨论】：

【解决方案3】：

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

如果换行：

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

与

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

这很好用。

Here 是它的 JsFiddle 处理此更改

【讨论】：