时间戳

首页 > 解决方案 > 获取动态数据属性

jquery - 获取动态数据属性

问题描述

我已经搜索过这个并找到了与我正在寻找的答案非常相似但不完全一样的答案。作为一个明确的非专家，也许我不确切知道如何搜索或搜索什么。如果这是重复的，我很抱歉。

主页有三个引导模式，每个模式都从三个不同的按钮触发。每个模式都要求访问者选择不同的选项来为他们的订单添加他们的产品。当他们选择一个选项时，它会关闭模式并更新主窗口以在其总价中显示该选项的价格，并删除启动该模式的按钮（因为它已经配置）。

除了更新总价格部分外，其中大部分都在工作。我一次只能让这三个中的一个工作。如果您选择任何选项（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”数据元素中保存的运行总计。

我会以一种古怪的方式解决这个问题吗？我错过了什么？请帮忙！！！！

标签： jquery

解决方案

我发现了我的错误！我使用的 replaceWith() 只工作了一次（正如你所料，现在我已经重新阅读了关于 replaceWith() 函数的 JQuery 文档）。我用 html() 交换了它，它工作得很好。

推荐阅读