Получение атрибутов данных Dynami c

Question

Я искал это и нашел ответы, очень похожие на то, что я ищу, но не совсем. Как определенный неспециалист, возможно, я не знал точно, как искать или что искать. Извините, если это дубликат.

На главной странице есть три bootstrap модала, каждый из которых запускается с трех разных кнопок. Каждый модал просит, чтобы посетитель выбрал различные варианты, чтобы поместить их продукт для их заказа. Когда они выбирают параметр, он закрывает модальное окно и обновляет главное окно, чтобы показать цену этого параметра в их общей цене, и удаляет кнопку для запуска этого режима (поскольку он уже настроен).

Большинство из этого работает, за исключением обновления компонента общей цены. Я могу заставить только одного из трех работать одновременно. Если вы выберете любой вариант (1, 2 или 3), он будет корректно обновлять цену, но ни один из двух других вариантов не обновит общую цену. Я предполагаю, что причина в том, как я читаю и устанавливаю атрибуты данных, но я не могу понять, что я делаю неправильно. Вот код:

First Option Modal Window

<div id="addFirstOption" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add First Option</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <p>Please choose the first option</p>
            <div id="dCalc">
            <form name="myForm" id="myForm">
                <input type='submit' name='name1' value='159.95' id='1' />
            <input type='submit' name='name2' value='169.95' id='2'/>
            </form>
            </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Second Option Modal Window

<div id="addSecondOption" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Second Option</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <p>Please choose the second option</p>
            <div id="dCalc">
            <form name="secondOptionForm" id="secondOptionForm">
                <input type='submit' name='name1' value='10.00' id='1' />
            <input type='submit' name='name2' value='15.00' id='2'/>
            </form>
            </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Third Option Modal Window
<div id="addThirdOption" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Third Option</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <p>Please choose third option</p>
            <div id="dCalc">
            <form name="thirdOptionForm" id="thirdOptionForm">
                <input type='submit' name='name1' value='212.95' id='1' />
            <input type='submit' name='name2' value='289.95' id='2'/>
            </form>
            </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Main Page JQuery Code

$(document).ready(function() {
    $('[data-id="addFirstOption"]').data("firstPrice", 0.00);
    $('[data-id="addSecondOption"]').data("secondPrice", 0.00);
    $('[data-id="addThirdOption"]').data("thirdPrice", 0.00);
    $('[data-id="totalprice"]').data("price", 549.95); // this price set dynamically in PHP
});

$( function() {
    $( "#dialog" ).dialog({
      autoOpen: false
    });

    $( "#opener" ).on( "click", function() {
      $( "#dialog" ).dialog( "open" );
    });
  } );
    lightbox.option({
      'showImageNumberLabel': false
    })
    $(".addToBuildButton").click(function(){
        $("#addFirstOption").modal("show");
    });
    $(".addToBuildSecondOption").click(function(){
        $("#addSecondOption").modal("show");
    });
    $(".addToBuildThirdOption").click(function(){
        $("#addThirdOption").modal("show");
    });

$("#myForm").submit(function(e) {
    var sum = 0;
    e.preventDefault();
    $('[data-id="addFirstOption"]').append($(document.activeElement).attr('value'));
    $('[data-id="addFirstOption"]').data("firstPrice", $(document.activeElement).attr('value'));
    sum += parseFloat($('[data-id="addFirstOption"]').data("firstPrice")) + parseFloat($('[data-id="totalprice"]').data("price")) + parseFloat($('[data-id="addSecondOption"]').data("secondPrice")) + parseFloat($('[data-id="addThirdPrice"]').data("thirdPrice"));
    $(".showFinalPrice").replaceWith("$"+sum.toFixed(2));

    $( "#addFirstOptionElement" ).empty();
    $('#addFirstOption').modal('toggle');
});

$("#secondOptionForm").submit(function(x) {
    var sum = 0;
    x.preventDefault();
    $('[data-id="addSecondOption"]').append($(document.activeElement).attr('value'));
    $('[data-id="addSecondOption"]').data("secondPrice", $(document.activeElement).attr('value'));
    sum = parseFloat($('[data-id="firstOption"]').data("addFirstPrice")) + parseFloat($('[data-id="totalprice"]').data("price")) + parseFloat($('[data-id="addSecondOption"]').data("secondPrice")) + parseFloat($('[data-id="addThirdOption"]').data("thirdPrice"));
    $(".showFinalPrice").replaceWith("$"+sum.toFixed(2));

    $( "#addSecondOptionElement" ).empty();
    $('#addSecondOptional').modal('toggle');
});

$("#thirdOptionForm").submit(function(y) {
    var sum = 0;
    y.preventDefault();
    $('[data-id="addThirdOption"]').append($(document.activeElement).attr('value'));
    $('[data-id="addThirdOption"]').data("thirdPrice", $(document.activeElement).attr('value'));
    sum = parseFloat($('[data-id="firstOption"]').data("addFirstPrice")) + parseFloat($('[data-id="totalprice"]').data("price")) + parseFloat($('[data-id="addSecondOption"]').data("secondPrice")) + parseFloat($('[data-id="addThirdOption"]').data("thirdPrice"));
    $(".showFinalPrice").replaceWith("$"+sum.toFixed(2));

    $( "#addSThirdOptionElement" ).empty();
    $('#addControlModal').modal('toggle');
});

Он визуально добавляет варианты цены на главный экран в зависимости от того, какой вариант выбран первым, но после этого он только визуально добавляет цены к на главном экране и не будет обновлять промежуточную сумму, хранящуюся в элементе данных totalprice.

Неужели я поступлю по-дурацки? Что мне не хватает? Пожалуйста, помогите !!!!

Answer 1

Я нашел свою ошибку! Я использовал replaceWith (), который работал только один раз (как и следовало ожидать, теперь, когда я перечитал JQuery документацию по функции replaceWith ()). Я поменял это с html (), и оно отлично работает.