在Javascript中定义[ID]的问题

我正在使用我的网站上的.change功能单击此处，使用户可以选择其产品的数量。我遇到的问题是，我的图表只是将我的我与12块联系起来，而不是6块。我检查了firebug，我注意到矩阵创建了两个按钮，链接到6块的按钮与12块的按钮重叠。在我的HTML中，只有一个按钮

最终，我希望按钮链接相对于价格进行更改。我注意到我的矩阵没有响应Jquery调用，所以我假设有一些表达式标记来实现这一点

当你选择6件装时，点击“添加到图表”，它会引导你进入购物车，价格为6件装。目前，它只是拿起12包。如果您查看inspector中的页面，您会注意到矩阵创建了两个按钮，一个用于6块，另一个用于12块。12是重叠的六个BCO按钮使用的是类

<div class="pricing-assets">
<h4>select a quantity</h4>
 <select id="item_select">
  <option value="1">6 pack</option>
  <option value="2">12 pack</option>
</select>

  <script type="text/javascript">
   var message = new Array();
     message[1] = "$15.00";
      message[2] = "$25.00";


      $(document).ready(function(){            
      $("#item_select").change(function(){
       var message_index
       message_index = $("#item_select").val();
        $(".price-item h3").empty();
         if (message_index > 0)
          $(".price-item h3").append(message[message_index]);
           });

           });

           </script>




    <div class="price-item right"><h3>$15.00</h3>
    {p_cartlink}
    <a href="http://store.bodyworksforme.com/ShoppingCart.asp?ProductCode={id}" class="button_atc atc_{url_title}"></a>
    {/p_cartlink}

---

是的，在6的上面有12个

---

为什么不并排显示它们，或者只显示用户选择的一个？

在矩阵循环中，您希望向链接元素添加一个类/ID以匹配产品ID，然后将其用作选择选项的值，以便在选择更改时切换链接。详细内容：

首先，在select中，根据矩阵字段的内容动态生成select项我猜您的选项名为{option_name}，如果需要，请替换：

<div class="pricing-assets">
<h4>select a quantity</h4>
 <select id="item_select">
  {p_cartlink}
    <option value="{id}">{option_name}</option>
  {/p_cartlink}
</select>

现在，在需要位于同一模板中的JS中，创建一个全局变量，我们可以从onReady JS访问该变量，该变量指向一个包含我们选项的对象，该对象通过再次在矩阵中循环来传播

通过使用对象而不是数组，我们可以使用选项ID作为我们的对象键，使用价格字符串作为我们的值，这就像我们在构建select时所做的镜像

旁白：这里有人可能会指出，JS全局对象是一件坏事，应该避免，这通常是正确的，但在我看来，这是一个有效的用途-如果您有适合cart交互的父JS对象，请务必将其设置为该对象上的属性，而不是窗口上的属性：

现在，在您的主应用程序JS文件或任何地方，在文档就绪时执行以下操作：

    $(document).ready(function(){
      //cache some selectors to minimise DOM queries and for clarity below
      var $select = $("#item_select"),
          $priceOutput = $(".price-item h3"),
          $addToCartBtns = $(".button_atc"),
          initialVal = $("#item_select").val();

      //hide add to cart buttons except for the current valid one
      function showCartButton(value){
        $addToCartBtns.hide().filter('.add_cart_' + value).show();  
      }
      //bind to the change event
      $select.change(function(e){
        var messageVal = $(e.target).val();//get the current value of the select as of the change
        //empty the current price container
        $priceOutput.empty();
        if ( messageVal !== '')
          //append the message
          $priceOutput.append(priceMessage[messageVal]);
          //show hide add to cart
          showCartButton(messageVal);
        });
      });
      //show correct button for state of select at page load
      showCartButton(initialVal);
</script>

---

这样做的主要优点是灵活性：这段代码应该能够处理具有每个选项价格的任何选项值范围，因为select html、add to cart按钮和priceMessage对象都是从EE中的相同数据动态生成的。

嘿，mate，你的电子邮件地址是什么，你似乎是未来项目的好联系人

<script type="text/javascript">
   window.priceMessage = {};
      {p_cartlink}
        message["{id}"] ='$' + parseFloat({option_price}).toFixed(2);
      {/p_cartlink}
</script>

    $(document).ready(function(){
      //cache some selectors to minimise DOM queries and for clarity below
      var $select = $("#item_select"),
          $priceOutput = $(".price-item h3"),
          $addToCartBtns = $(".button_atc"),
          initialVal = $("#item_select").val();

      //hide add to cart buttons except for the current valid one
      function showCartButton(value){
        $addToCartBtns.hide().filter('.add_cart_' + value).show();  
      }
      //bind to the change event
      $select.change(function(e){
        var messageVal = $(e.target).val();//get the current value of the select as of the change
        //empty the current price container
        $priceOutput.empty();
        if ( messageVal !== '')
          //append the message
          $priceOutput.append(priceMessage[messageVal]);
          //show hide add to cart
          showCartButton(messageVal);
        });
      });
      //show correct button for state of select at page load
      showCartButton(initialVal);
</script>