Javascript:多个按钮，一个类，不能使用id.按一个按钮改变他们所有

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

本文关键字：一个 按钮 改变 他们 id Javascript 不能      更新时间：2023-09-26

我希望有人能帮我一下。我已经挣扎了三天了。:)

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

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

主要标准:

  • 按钮不能有单独的id。必须单独使用class
  • 按钮是为每个产品动态生成的，每个页面的产品数量是不可预测的
    • 比如，"onclick="这个。innerHTML = '嗨栈!我认为不能使用(它打破了分类页面)

这是我到目前为止的钢笔，包括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?

我访问过这个网站很多次，但直到现在才加入。提前感谢您的任何帮助!div =)

可以使用jQuery。

<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');
    })  
})
演示

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

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

因为Woocommerce支持jQuery，你可以做这样的事情，如果你不需要，不要纠结于纯Javascript:

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

我想提供一种本地方式:

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>

相关文章：