Change the href value when the data-id is selected

Question

Comrades, I have the following code:

<div class="nice-select" tabindex="0">
    <div class="current">
        250 items <span class="price" data-count="250" data-id="160" data-price="10">$10</span>
    </div>
    <div class="list">
        <div class="scrollbar">
            <div class="list_item option selected" data-value="10">
                250 items <span class="price" data-count="250" data-id="160" data-price="10">$10</span>
            </div>
            <div class="list_item option" data-value="25">
                500 items <span class="price" data-count="500" data-id="161" data-price="25">$25</span>
            </div>
            <div class="list_item option" data-value="40">
                1000 items <span class="price" data-count="1000" data-id="162" data-price="40">$40</span>
            </div>
            <div class="list_item option" data-value="60">
                2000 items <span class="price" data-count="2000" data-id="163" data-price="60">$60</span>
            </div>
            <div class="list_item option" data-value="110">
                5000 items <span class="price" data-count="5000" data-id="165" data-price="110">$110</span>
            </div>
        </div>
    </div>
</div>

<div class="block">
    <div class="submit">
        <a class="submit_btn" disabled="" href="">Continue</a>
    </div>
</div>

Recently everything was fine, but I decided to change a bit my code and it’s a catastrophe now.

My javascript is:

$('div.list_item option[data-id]').click(function(){
    $('a.btn').attr('href', '?add-to-cart=130&variation_id=' + $(this).data('data-id'));
});

All I need is to get the value from the “data-id” attribute and add it to my button href.

For example if recently I selected the option with data-id=”160″

<div class="list_item option selected" data-value="10">
     250 items <span class="price" data-count="250" data-id="160" data-price="10">$10</span>
</div>

my URL have to transform to transformed to:

<a class="submit_btn" href="/?add-to-cart=130&variation_id=160">Continue</a>

or if I selected the option with data-value="25" my URL transformed to:

<a class="submit_btn" href="/?add-to-cart=130&variation_id=161">Continue</a>

Recently I asked this question on Stackoverflow general resource, but they mocked me, but did not give an answer so would appreciate your help. I’m not an expert in JS but really want to figure out this case.

--------------------------------------------------

>>> Share a link to this question, just copy and paste the code bellow on your web page <<<

<a href="https://www.wptricks.com/question/change-the-href-value-when-the-data-id-is-selected/">

Change the href value when the data-id is selected</a>
0
Jamdev 2 months 0 Answers 64 views 0

Leave an answer