在 JavaScript 字符串中动态存储多个值答案

【问题标题】：Dynamically Storing Multiple Values in a JavaScript String在 JavaScript 字符串中动态存储多个值
【发布时间】：2020-11-04 14:49:19
【问题描述】：

我有一个动态按钮，其中包含“compare-btn”类和按钮所在的每个产品唯一的 ID。

当这个按钮被点击时，我创建了一个脚本，它获取按钮的 ID 并设置一个 JS 变量等于该值，见下文：

  $(".compare-btn").click(function() {
    var contentPanelId = $(this).attr("id");

    $.ajax({
      method: "POST",
      url: "compare.php",
      // data: { data1: contentPanelId, data2: value2, data3: value3 }
      data: { data1: contentPanelId }
    })

    .done(function(html) {
      console.log(contentPanelId);
    })

    .fail(function(html) {
      // Fail
    });
  });
})(jQuery);

我想做的是存储三个值而不是一个。例如，如果单击了 ID 为 1、2 和 3 的按钮，则数据对象将包含 data1：1、data2：2 和 data3：3。但是，我不确定如何更改以下代码以使它按描述工作......

$(".compare-btn").click(function() {
var contentPanelId = $(this).attr("id");

【问题讨论】：

不清楚你的目标是什么。鉴于此声明：the data object would contain data1: 1, data2: 2 and data3: 3 您的意思是要对请求中发送的值进行硬编码吗？日期如何根据单击的按钮而变化？
@RoryMcCrossan，每个按钮都有相同的类来运行click函数，但ID属性的值不同。我需要这样做，以便当您单击三个比较按钮时，data1、data2 和 data3 等于每个“单击”按钮的值。
但是一次只能点击一个按钮...？
@RoryMcCrossan 是的，我知道您一次只能单击一个按钮。但我需要收集被点击的三个按钮的值并将它们存储在对象中： data: { data1: contentPanelId_1, data2: contentPanelId_2, data3: contentPanelId_3 }
好的，我明白了。在这种情况下，当每个按钮被点击时，给它一个类，例如。 active。然后选择.active 元素并检索它们的id 属性以放置在对象中。现在的问题是您需要一种方法来取消选择按钮。因此，当单击按钮时only 切换active 类会更有意义，然后添加一个发送AJAX 请求的新“提交”按钮。您还可以打开各个按钮来切换复选框，因为这似乎更适合它们的用途。

标签： javascript jquery

【解决方案1】：

理想情况下，您应该将 id 存储在一个数组中。这样，您可以扩展为任意数量的排序。

    var list_id = []
    var limit = 3
    $(".compare-btn").click(function() {
      var contentPanelId = $(this).attr("id");
      if (list_id.length == limit) {
        $.ajax({
          method: "POST",
          url: "compare.php",
          data: { list_id: list_id }
        })
        .done(function(html) {
          console.log(list_id);
          list_id = []  // optional: clear list after compare
        })
        .fail(function(html) {
          // Fail
        });
      } else {
        list_id.push(contentPanelId)
      }
    });

【讨论】：