Question

我在我的网站上使用.change（）函数点击此处，用户可以选择其产品数量。我遇到的问题是我的图表只链接我的12包而不是6包。我已经检查过firebug并且我注意到矩阵已经创建了两个按钮按钮，链接到6包开始重叠12pack按钮。在我的HTML中有一个按钮

click here

最终我希望按钮链接相对于价格而变化。我注意到我的Matrix没有响应Jquery调用，所以我假设有一些表达式标记来执行此操作。 Matrix field setup

当您选择6包时，您点击添加到图表并将其引导至购物车，价格为6包。目前它正在拿起12pack。如果你在检查器中查看页面，你会发现一个矩阵创建了两个按钮，一个用于6个包，一个用于12个.12个重叠六个bcos按钮正在使用一个类。

<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}

Answer 1

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

首先，在您的选择中，根据矩阵字段的内容动态生成选择项（我猜测您的选项名称为{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>

在您的添加到购物车链接中，根据与其相关的选项的ID设置一个类，我在.add_cart_下命名该类，以避免现有样式中的冲突：

    <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} add_cart_{id}"></a>
    {/p_cartlink}

现在在你的JS中（需要在同一个模板中，创建一个我们可以从onReady JS访问的全局变量，它指向一个包含我们选项的对象，这可以通过再次循环遍历矩阵来实现。< / p>

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

（旁白：在这里有人可能会指出JS全局是一个坏事，应该避免，这通常是正确的，但在我看来这是一个有效的用途 - 如果你有合适的父JS对象购物车互动的东西一定要把它设置为一个属性，而不是window）：

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

现在在您的主应用程序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>

这样做的关键优势是灵活性：此代码应该处理具有每个选项价格的任何选项值范围，因为选择html，添加到购物车按钮和priceMessage对象都是从动态生成的EE中的相同数据。

Answer 2

是的，你有6个顶部的12个。

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

在Javascript中定义[ID]的问题

2 个答案: