Question

我希望有人可以帮助我。我已经挣扎了3天。 :) 我是wordpress-woocommerce＆amp;的新手。 php，但我使用的主题没有显示任何＆＃34;标志＆＃34;使用Ajax购物车将商品添加到购物车时我不擅长编程，但创建了一些Javascript来尝试解决这个问题。不幸的是，现在如果你点击一个按钮，所有按钮都会改变。我希望代码只适用于主动点击的按钮。主要标准：按钮不能有单独的ID。必须单独使用课程为每个产品动态生成按钮，每页产品的数量是不可预测的类似的东西，＆＃34; onclick =＆＃34; this.innerHTML =＆＃39;喜欢Stack！＆＃39;＆＃34;我认为不能使用（它打破了类别页面）这是我迄今为止的笔，包括html，css和js：http：//codepen.io/xkurohatox/pen/eNbMKb HTML ＆lt; a href =＆＃34;＃＆＃34; class =＆＃34; button add_to_cart_button product_type_simple added＆＃34; onclick =＆＃34; birds（）＆＃34;＆gt;添加到购物车＆lt; / a＆gt; ＆lt; a href =＆＃34;＃＆＃34; class =＆＃34; button add_to_cart_button product_type_simple added＆＃34; onclick =＆＃34; birds（）＆＃34;＆gt;添加到购物车＆lt; / a＆gt; ＆lt; a href =＆＃34;＃＆＃34; class =＆＃34; button add_to_cart_button product_type_simple added＆＃34; onclick =＆＃34; birds（）＆＃34;＆gt;添加到购物车＆lt; / a＆gt; ＆lt; a href =＆＃34;＃＆＃34; class =＆＃34; button add_to_cart_button product_type_simple added＆＃34; onclick =＆＃34; birds（）＆＃34;＆gt;添加到购物车＆lt; / a＆gt; 实际上，按钮的数量一次可以是1-2000个。 CSS .button.add_to_cart_button.product_type_simple.added {color：yellow;} JS function birds（）{ var a = document.querySelectorAll（＆＃39; .button.add_to_cart_button.product_type_simple.added＆＃39;），i; for（i = 0; i＆lt; a.length; ++ i）{ a [i] .style.color =＆＃34; pink＆＃34 ;; A [1] .innerHTML =＆＃34;成功＆＃34 ;; } setTimeout（＆＃39; cats（）＆＃39;，2000）; } function cats（）{ var a = document.querySelectorAll（＆＃39; .button.add_to_cart_button.product_type_simple.added＆＃39;），i; for（i = 0; i＆lt; a.length; ++ i）{ a [i] .style.color =＆＃34; red＆＃34 ;; a [i] .innerHTML =＆＃34;加入购物车＆＃34 ;; } } 这是元素检查器的页面：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尝试。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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函数中，接收锚作为参数并更改锚的样式，而不是遍历所有锚点。

＆＃13;

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";
}

＆＃13;

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

＆＃13;

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

＆＃13;

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个类，不能使用ID。按1按钮可更改全部

5 个答案: