Question

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

最终我希望按钮链接相对于价格而变化。有谁知道我需要添加下面的代码来实现这一目标？

我只有一个链接按钮，我正在使用表达式引擎，所以第二个会自动创建

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


{p_cartlink}
 <a href="http:// class="button_atc atc_{url_title}"></a>
 {/p_cartlink}

问题在于此代码是针对模板的，我不希望您使用产品名称SLEEP-12 and SLEEP-6我需要使用产品ID。是可以为JS中的每个按钮创建需求ID然后启用和禁用按钮的方式。例如，当您选择6件装时，会出现6件装的按钮并禁用12件装？

Answer 1

你可以这样做

$(document).ready(function() {
    $("#item_select").change(function() {
        var message_index
        message_index = $("#item_select").val();
        // get the correct button
        var $button = $('.price-item right .button_atc').eq(message_index-1);
        // hide button - not the correct one
        $('.price-item right .button_atc').not($button).hide();
        // show correct button
        $button.show();
        $(".price-item h3").empty();
        if (message_index > 0) $(".price-item h3").append(message[message_index]);
    });
});

Answer 2

我只有一个链接按钮，而不是页面中有两个链接按钮。然后，当索引更改时，我将更新该链接按钮的href属性。

Answer 3

这变成了一个非常丑陋的黑客，代码未经测试，但我认为它应该可行。

请尝试一下，如果您有任何问题请告诉我：

<script type="text/javascript">
var message = ["$15.00","$25.00"];
$(document).ready(function(){
    // Init to make sure we display the correct button @ load
    $("#item_select").trigger('change');

    // The change-function
    $("#item_select").on('change'.function() {
        var message_index = $("#item_select").val();
        var message_indexn = message_index.split(' ');
        var message_id = 0;
        for ($i = 0; i < message_indexn.length; i++) {
            if (/^[\d]+$/.test(message_indexn[i])) {
                message_id = message_indexn[i];
                break;
            }
        }

        $(".price-item h3").empty();
        if (message_index > 0)
            $(".price-item h3").append(message[message_index-1]);

        $('.price-item .button_atc').each(function () {
            if ($(this).attr('href') == 'http://store.bodyworksforme.com/ShoppingCart.asp?ProductCode=SLEEP-'+message_id) {
                if ($(this).is(':hidden'))
                    $(this).show();
            }
            else {
                if ($(this).is(':visible'))
                    $(this).hide();
            }
        });
    });
});
 </script>

Answer 4

这会有用吗？

<select id="item_select">
    <option value="6">6 pack</option>
    <option value="12">12 pack</option>
</select>

$('.button_atc').bind('click',function(){
var val = $('#item_select').val();
window.location = "store.bodyworksforme.com/ShoppingCart.asp?ProductCode=SLEEP"+val;
});

如果需要，您也可以为按钮设置ID，并使其特定于产品。

jQuery .change（）函数问题

4 个答案: