Изменение выбранной кнопки при изменении параметра

Question

Я пытаюсь сделать так, чтобы кнопка менялась при выборе конкретной опции. В качестве альтернативы, если кто-то может сказать мне, как просто изменить текст и цену, чтобы минимизировать код, это было бы здорово!

    Bundles
<br>
<select id="select-quantity">
    <option value="NONE">None</option>
    <option value="SIX">Quanitiy 6 ($5.00)</option>
    <option value="TWELVE">Quanitiy 12 ($10.00)</option>
    <option value="TWNFOUR">Quanitiy 24 ($20.00)</option>
$('#select-quantity').change(function() {
    var s = $('.snipcart-add-item[data-item-id="' + $(this).val() + '"]');
});
</select>
<br>
<br>
<button class="snipcart-add-item" id="my-button"
 style="border: 0; background: transparent"
 data-item-id="NONE"
 data-item-url="/"
 data-item-name="1 Yin Yang Sticker"
 data-item-price="2.00"
 data-item-quantity="1">
 <img src="http://i.imgur.com/EZ6gneV.png" alt="Add To Cart">
</button>

<button class="snipcart-add-item" style="display: none"
 data-item-id="SIX"
 data-item-url="/"
 data-item-name="6 Yin Yang Stickers"
 data-item-price="5.00">
 <img src="http://i.imgur.com/EZ6gneV.png" alt="Add To Cart">
</button>

<button class="snipcart-add-item" style="display: none"
 data-item-id="TWELVE"
 data-item-url="/"
 data-item-name="12 Yin Yang Stickers"
 data-item-price="10.00">
 <img src="http://i.imgur.com/EZ6gneV.png" alt="Add To Cart">
</button>

<button class="snipcart-add-item" style="display: none"
 data-item-id="TWNFOUR"
 data-item-url="/"
 data-item-name="24 Yin Yang Stickers"
 data-item-price="20.00">
 <img src="http://i.imgur.com/EZ6gneV.png" alt="Add To Cart">
</button>

Answer 1

Ваш код не подлежит обслуживанию, поэтому я сделал несколько изменений, которые, по моему мнению, очень важны:

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

$(document).ready(function() {
    $('#select-quantity').change(function() {
        var s = $('#my-button');
        var val = $(this).val();
        // Unit Prices Object
        var unitPrices = {1: 2.00, 6: 5.00, 12: 10.00, 24: 20.00};
        // Change the attributes based on the selection
        s.attr('data-item-name', val + ' Ying Yang Sticker');
        s.attr('data-item-price', unitPrices[val]);
        s.attr('data-item-quantity', 1);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>
<select id="select-quantity">
    <option value="1">None</option>
    <option value="6">Quanitiy 6 ($5.00)</option>
    <option value="12">Quanitiy 12 ($10.00)</option>
    <option value="24">Quanitiy 24 ($20.00)</option>
</select>
<br>
<br>

<button class="snipcart-add-item" id="my-button"
 style="border: 0; background: transparent"
 data-item-id="ADD-ITEM"
 data-item-url="/"
 data-item-name="1 Yin Yang Sticker"
 data-item-price="2.00"
 data-item-quantity="1">
 <img src="http://i.imgur.com/EZ6gneV.png" alt="Add To Cart">
</button>