Javascript：多个按钮，1 类，不能使用 id。按下 1 个按钮会改变它们答案

【问题标题】：Javascript: Multiple buttons, 1 class, cannot use ids. Pressing 1 button changes THEM ALLJavascript：多个按钮，1 类，不能使用 id。按下 1 个按钮会改变它们
【发布时间】：2015-08-03 04:36:22
【问题描述】：

我希望有人可以在这里帮助我。我已经挣扎了3天。 :)

我是 wordpress-woocommerce 和 php 的新手，但是当使用 Ajax 购物车将商品添加到购物车时，我使用的主题不会显示任何“迹象”。我不擅长编程，但创建了一些 Javascript 来尝试解决这个问题。不幸的是，现在如果你点击一个按钮，所有按钮都会改变。

我希望代码仅适用于被点击的按钮。

主要标准：

按钮不能有单独的 ID。必须单独使用类
按钮是为每个产品动态生成的，每页的产品数量是不可预测的
我认为不能使用“onclick="this.innerHTML='hi Stack!'" 之类的内容（它会破坏类别页面）

这是我目前的笔，包括 html、css 和 js：http://codepen.io/xkurohatox/pen/eNbMKb

HTML

    <a href="#" class="button add_to_cart_button product_type_simple added" onclick="birds()">Add to Cart</a>
<a href="#" class="button add_to_cart_button product_type_simple added" onclick="birds()">Add to Cart</a>
<a href="#" class="button add_to_cart_button product_type_simple added" onclick="birds()">Add to Cart</a>
<a href="#" class="button add_to_cart_button product_type_simple added" onclick="birds()">Add to Cart</a>

实际上，按钮的数量可能在 1 到 2000 个之间。

css

    .button.add_to_cart_button.product_type_simple.added {color:yellow;}

js

     function birds(){
var a = document.querySelectorAll('.button.add_to_cart_button.product_type_simple.added' ), i;

    for (i = 0; i < a.length; ++i) {
     a[i].style.color = "pink";
     a[i].innerHTML="Success";  
   }
    setTimeout ( 'cats()', 2000 );
   }
    function cats(){
      var a = document.querySelectorAll('.button.add_to_cart_button.product_type_simple.added'        ), i;


    for (i = 0; i < a.length; ++i) {
     a[i].style.color = "red";
    a[i].innerHTML="Add to Cart";
       }
     }

这里是元素检查器的页面：http://s.codepen.io/xkurohatox/debug/eNbMKb?

我曾多次访问该网站，但直到现在才加入。预先感谢您的任何帮助！ =)

【问题讨论】：

我对 woocommerce 的了解为零，所以我将其发布为评论，但这个 added 类看起来相当显眼。是否这是框架在将商品添加到购物车后动态添加的类，在这种情况下，您可以利用 CSS 中的类？还是它总是在那里/有其他语义含义？
嗨，IC。你是对的，它是动态生成的！我不确定如何利用它来更改文本，因为几乎所有内容都在 php 中（我还不知道），而且我害怕尝试编辑它。老实说，我没想到大部分表格都是用 php 编写的，尽管仍然很高兴学习。您对在哪里寻找或尝试/做什么有什么建议吗？感谢您的关注！真的让我很开心:)
FWIW 看看 stackoverflow.com/a/29682894/44853 。这有点 hacky，但如果它完成了工作，你也许可以做类似的事情。
谢谢我！我正在研究这个以及“复选标记”方法，但害怕跨浏览器问题。我可能会先尝试一些比添加到购物车按钮更重要的东西，但可能还需要再次查看它以添加到购物车（仍然有一些问题，但可能有问题），你的答案是特别是woocommerce。 Wooooohoo ;) 再次感谢您！
WooCommerce 已经这样做了，这是商店档案，所以我看不出自己写这个的意义。相反，我会查看您的主题覆盖了哪些模板以及它为什么会破坏默认功能。

标签： javascript jquery ajax wordpress woocommerce

【解决方案1】：

您可以为此使用 jQuery。

HTML

<a href="#" class="button add_to_cart_button product_type_simple added" >Add to Cart</a>
<a href="#" class="button add_to_cart_button product_type_simple added" >Add to Cart</a>
<a href="#" class="button add_to_cart_button product_type_simple added" >Add to Cart</a>
<a href="#" class="button add_to_cart_button product_type_simple added" >Add to Cart</a>

jQuery

$(document).ready(function() {
    $('.add_to_cart_button').on('click', function() {
           $(this).text('success').css('color', 'red');
    })  
})

DEMO

【讨论】：

非常感谢您的帮助 b0s3！我真的没想到这么快就有这么多回复。 :)

【解决方案2】：

在纯 javascript 中，您可以使用

1) 将onclick="birds()" 更改为onclick="birds(this)"

2) 在Birds 函数中，接收锚点作为参数并更改锚点的样式，而不是遍历所有锚点。

function birds(btn){

    btn.style.color = "pink";
    btn.innerHTML="Success";  

    setTimeout ( function() {
         cats(btn);
    }, 2000 );
}

function cats(btn){
    btn.style.color = "red";
    btn.innerHTML="Add to Cart";
}

.button.add_to_cart_button.product_type_simple.added {
    color:yellow;
}

<a href="#" class="button add_to_cart_button product_type_simple added" onclick="birds(this)">Add to Cart</a>
<a href="#" class="button add_to_cart_button product_type_simple added" onclick="birds(this)">Add to Cart</a>
<a href="#" class="button add_to_cart_button product_type_simple added" onclick="birds(this)">Add to Cart</a>
<a href="#" class="button add_to_cart_button product_type_simple added" onclick="birds(this)">Add to Cart</a>

【讨论】：

非常感谢 Davcs86，您的回答非常完美，并且使用简单的 js 很好地解决了问题。 :) 我也非常感谢您的解释，是的，这正是我想要的。再次感谢您，davcs86！

【解决方案3】：

你可以用 jQuery 试试。

$(".add_to_cart_button").on("click",function(){
  $(this).css("color","red");
  $(this).html("Success");
});

.button.add_to_cart_button.product_type_simple.added {
  color:yellow;
}

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<a href="#" class="button add_to_cart_button product_type_simple added">Add to Cart</a>
<a href="#" class="button add_to_cart_button product_type_simple added">Add to Cart</a>
<a href="#" class="button add_to_cart_button product_type_simple added">Add to Cart</a>
<a href="#" class="button add_to_cart_button product_type_simple added">Add to Cart</a>

【讨论】：

非常感谢Shehroz！这是官方的，我终于敞开心扉学习jQuery了，呵呵。您的回答非常简洁易读。 :) 我将使用超时功能开始练习。
是的，jQuery 太容易学习了 :) 不客气。如果对您有帮助，请投票并接受作为答案！

【解决方案4】：

由于 Woocommerce 支持 jQuery，你可以做这样的事情，如果你不需要，不要与纯 Javascript 作斗争：

$(function() {
    $('.add_to_cart_button').click(function(){
      $(this).text('success').css('color', 'red');
    }); 
});

【讨论】：

嗨，汤姆，非常感谢您的友好建议和帮助。 :) 是的，我现在真的需要过渡到 jQuery。可能很明显，我对 Javascript 很陌生，但 jQuery 看起来非常合乎逻辑和简洁。
@xkurohatox：不客气，是的，jQuery 是必须的。注意：如果您解决了问题，请不要忘记将其中一个答案标记为正确

【解决方案5】：

我想提供一种原生方式：

var all_buttons = document.querySelectorAll(".add_to_cart_button");

Array.prototype.slice.call(all_buttons)
  .forEach(function(button) {
    button.onclick = function() {
      this.innerHTML = 'success';
      this.style.color = 'red';
    };
  });

.button.add_to_cart_button.product_type_simple.added {
  color:yellow;
}

<a href="#" class="button add_to_cart_button product_type_simple added">Add to Cart</a>
<a href="#" class="button add_to_cart_button product_type_simple added">Add to Cart</a>
<a href="#" class="button add_to_cart_button product_type_simple added">Add to Cart</a>
<a href="#" class="button add_to_cart_button product_type_simple added">Add to Cart</a>

【讨论】：

非常感谢iplus26。 :) 哇，我实际上早先尝试使用“for each”，但不知道如何使其工作。在这种情况下，使用数组和切片/调用有什么好处吗？再次感谢你:)
@xkurohatox 不客气。 document.querySelectorAll() 方法返回一个NodeList，这是一个类似数组的对象，但不是数组。如果你想使用一些数组方法，你需要使用Array.prototype.slice.call() 方法，比如在类数组对象上使用forEach()。您可以使用我提供的原生方式，也可以只使用 jQuery 解决方案。
哦，再次感谢 iplus26！ :) 几个月前我参加了一个 javascript 课程，但我们从未接触过节点，尽管我记得对它们的工作原理感到好奇。感谢您的帮助！
@xkurohatox 继续前进。当您想使用某些方法时，请记住查看 MDN 文档。如果您对我的回答投赞成票，我将不胜感激。 :)