Changing the Selected button when option is changed

Question

I am trying to make it so that the button changes when the specific option is selected. alternatively if someone could tell me how to just change some text and price to minimize the code that would be great!

    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>

Is this java or javascript? If it's java might help tagging the framework you are using. — TheBakker, May 30 '16 at 20:04

score 0 · Answer 1 · answered May 30 '16 at 21:57

Your code is not maintainable, so I made a few alteration that I believe are quite important, as such:

You don't need to deal with displaying / hiding buttons per item, this is sloppy. Instead, what you should be doing is changing the parameters of the button based on the value selected.

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

Changing the Selected button when option is changed

1 Answers1