Проблема с функцией jQuery .change()

Question

Я использую функцию.change() на своем сайте, нажмите здесь, чтобы пользователи могли выбрать количество своего продукта. Проблема, которую я имею, состоит в том, что моя диаграмма только связывает меня с 12 пакетами, а не с шестью. Я проверил 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 Мне нужно использовать идентификатор продукта. Это способ создать идентификатор потребности для каждой кнопки в JS, а затем включить и отключить кнопку. например, когда вы выбираете 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

Будет ли это работать?

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

Вы также можете установить идентификатор для кнопок и сделать их специфичными для продуктов, если хотите.

Answer 4

Это стало очень уродливым взломом, и код не проверен, но я думаю, что он должен работать.

Пожалуйста, попробуйте и дайте мне знать, если у вас есть какие-либо проблемы:

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