Javascript: 多个按钮，1 class，不能使用ids。按 1 个按钮更改所有

Question

我希望有人能帮我解决这个问题。我已经挣扎了3天了。 :)

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

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

主要标准：

按钮不能有单独的 ID。必须单独使用class
每个产品动态生成按钮，每页产品数不可预测
我认为 "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?

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

Answer 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

Answer 2

您可以尝试使用 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>

Answer 3

自从 Woocommerce 支持 jQuery，你可以做这样的事情，如果你不需要的话，不要纠结于普通的 Javascript:

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

Answer 4

在纯 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>

Answer 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>

Javascript: 多个按钮，1 class，不能使用ids。按 1 个按钮更改所有

Javascript: Multiple buttons, 1 class, cannot use ids. Pressing 1 button changes THEM ALL

javascript

ajax

wordpress

jquery

woocommerce