按类识别按钮答案

【问题标题】：Identifying button by class按类识别按钮
【发布时间】：2021-03-16 11:11:00
【问题描述】：

我正在开发一个网站来展示可定制的商店产品。每个产品信息框都有一个按钮，如屏幕截图所示：

每次用户点击按钮选项时，都会出现有关可定制产品选项的信息，如下所示：

这里有一段来自管理按钮选项的产品信息框的代码：

 <div class ="oculto" id="customDiv'.$row["id"].'"  style="display:none;" class="answer_list" >
  <H3>Options</H3>
    
  </div>

这里是管理切换方法的 JavaScript 代码：

 $(document).ready(function () {
    $(".customizable").click(function () {
      var product = $(this).attr("id");
      
      $(".oculto").toggle('slow', function() {
    // Animation complete.
  });
    });
  });

当用户点击选项按钮时，可自定义的选项会出现在选项标签下方的选项 div 中，当用户再次点击按钮时，可自定义的选项会消失。

我的问题是，当用户单击产品 A 选项按钮时，所有产品都会出现所有可自定义的选项，而不仅仅是产品 A。

我不知道如何识别每个产品的“选项”按钮，并使切换方法仅对单击的产品“选项”按钮有效。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

通过使用$('.oculto')，您可以定位页面中的所有元素。您只需在产品内定位.oculto。请尝试以下代码。

$(this).children(".oculto").toggle('slow', function() { ... }

我还看到 2 个类属性，删除一个。您可以组合多个以空格分隔的类

 <div class ="oculto" id="customDiv'.$row["id"].'"  style="display:none;" class="answer_list" >

改成

 <div class ="oculto answer_list" id="customDiv'.$row["id"].'"  style="display:none;">

【讨论】：