解决document.getElementsByClassName多元素条件样式不生效问题

问题根源 #

你的代码存在两个关键问题：

1. 直接通过document.getElementsByClassName选取所有目标元素后，仅修改了集合的第一个元素（collection1[0]），导致只有第一个商品的容器变色
2. 没有关联当前点击按钮所属的商品容器，操作的是全局元素而非对应商品的元素

修正方案 #

利用jQuery的DOM遍历方法，精准定位当前点击按钮所属的商品容器，再修改对应元素的背景色：

1. 先获取当前点击的按钮对象，通过closest()向上查找最近的.couleur1容器，再用find()定位容器内的.couleur2元素
2. 优化data-qte的取值方式，用data()直接获取数值类型，避免字符串比较的潜在问题

修正后的完整JavaScript代码：

$('.ajouter-panier').click(function(event) {
  event.preventDefault();
  var nom_option = "";
  var prix_option = 0;
  var url = $(this).data('url');
  var option_checkbox = $(this).data('checkbox');
  if (option_checkbox != "") {
    var checkboxes = document.getElementsByClassName(option_checkbox);
    for (var i = 0; i < checkboxes.length; i++) {
      if (checkboxes[i].checked == true) {
        nom_option = nom_option + " (" + $(checkboxes[i]).data('nom') + ")";
        prix_option = prix_option + Number($(checkboxes[i]).data('prix'));
      }
    }
  }
  var nom;
  if ($(this).data('select')) {
    nom = $(this).data('nom') + " (" + document.getElementById($(this).data('select')).value + ")" + nom_option;
  } else {
    nom = $(this).data('nom');
  }
  var prix = Number($(this).data('prix')) + prix_option;
  if ($(this).data('qte')) {
    var qte_option = $(this).data('qte');
    MonPanier.ajouter_produit_dans_panier(nom, prix, qte_option, url);
  } else {
    MonPanier.ajouter_produit_dans_panier(nom, prix, 1, url);
  }
  // 优化：用data()直接获取数值类型
  var color = Number($(this).data('qte'));
  console.log(color);

  // 精准定位当前商品的容器及子元素
  var $currentBtn = $(this);
  var $couleur1Container = $currentBtn.closest('.couleur1');
  var $couleur2Element = $couleur1Container.find('.couleur2');

  if (color > 0) {
    $couleur1Container.css('backgroundColor', 'green');
    $couleur2Element.css('backgroundColor', 'green');
  } else {
    $couleur1Container.css('backgroundColor', '');
    $couleur2Element.css('backgroundColor', '');
  }
  afficherpanier();
});

关键修改说明 #

• closest('.couleur1')：从当前按钮向上遍历DOM树，找到最近的带有.couleur1类的父容器，确保只操作当前点击的商品对应的元素
• find('.couleur2')：在当前商品容器内查找.couleur2元素，避免影响其他商品的标题样式
• Number($(this).data('qte'))：data()方法会自动解析data属性的数值类型，比attr()获取字符串后再转换更可靠

内容的提问来源于stack exchange，提问作者pierre