Question

我有3个按钮，分别是期间，午餐和休息。当我单击这些按钮中的任何一个时，div id会根据按钮单击动态生成。

我为每个3按钮写了一个onclick，在click事件中我正在创建动态div。

首次点击按钮周期时，它会创建一个新的div并计算周期开始时间和结束时间，并将这些值绑定到动态创建的div。

但我的问题是，如果我第二次点击同一个按钮，会生成新的div，但该值不是绑定，而是重写第一个div。如何将数据绑定到生成的div。

<button id="btn-period">PERIOD</button>
<button id="btn-lunch">LUNCH</button>
<button id="btn-break">BREAK</button>
<div id="period-container"> 
</div>

    $("#btn-period").click(function(){
        var periodTime = localStorage.getItem("totalMins");
        var f=periodTime.split(".");
        var perHour = f[0]; //total minuts after split

        $("#period-container").append('<div class="period-div"><div class="row"><div class="col-md-4"><span id="perid-text">PERIOD</span></div><div class="col-md-4"><span id="perid-stime"></span></div><div class="col-md-4"><span  id="perid-etime"></span></div></div></div>')
        var endt = $("#hdVal").text();//fetching endtime of prayer
        var funOutput=calculate(endt,perHour);//test for end time of prayer 
    });
    $("#btn-lunch").click(function(){
    var lunchTime = localStorage.getItem("lunch");
    $("#period-container").append('<div class="lunch-div" style="background-color: #5bc0de; color: #fff; box-shadow: 1px 1px 2px grey; padding: 10px; margin-top: 10px;margin-bottom: 10px;"><div class="row"><div class="col-md-4"><span id="perid-text">LUNCH</span></div><div class="col-md-4"><span id="perid-stime"></span></div><div class="col-md-4"><span  id="perid-etime"></span></div></div></div>')
  });
    $("#btn-break").click(function(){
    var breakTime = localStorage.getItem("breakduration");


    $("#period-container").append('<div id="" style="background-color: #f0ad4e; color: #fff;    box-shadow: 1px 1px 2px grey;padding: 10px;margin-top: 10px;margin-bottom: 10px;"><div class="row"><div class="col-md-4"><span id="perid-text">BREAK</span></div><div class="col-md-4"><span id="perid-stimes"></span></div><div class="col-md-4"><span  id="perid-etime"></span></div></div></div>')

});

function calculate(endTimes,perHour)
{
    alert("dsd");
    $("#perid-stime").html(endTimes);
    var d=endTimes.split(":");
    var min= (+d[0]) * 60  + (+d[1]);
    var few=parseInt(min) + parseInt(perHour);
    var num = few;
    var hours = (num / 60);
    var rhours = Math.floor(hours);
    var minutes = (hours - rhours) * 60;
    var rminutes = Math.round(minutes);
    $("#perid-etime").html(rhours +" : "+ rminutes);
    $("#hdVal").text(rhours +" : "+ rminutes);

}

目前我只在句号中调用计算功能但我想在2按钮点击的其余部分调用相同的功能。

Answer 1

您正在按钮期间点击事件中创建具有相同ID的div。

在calculate(...)函数中，您只为perid-etime div设置了html。

解决方案是您必须生成具有不同ID和相同ID的div，您必须在calculate(...)函数中使用它来更新文本/ HTML。

Answer 2

请检查此https://jsfiddle.net/qd1r03wk/

你的问题在于设置所有具有相同ID的div，相反，我只创建具有唯一ID的

$("#btn-period").click(function(){
        var periodTime = localStorage.getItem("totalMins") || "8.00";
        var f=periodTime.split(".");
        var perHour = f[0]; //total minuts after split
                var periodLength = $(".period-div").length;
        $("#period-container").append('<div class="period-div"><div class="row"><div class="col-md-4"><span id="perid-text'+periodLength+'">PERIOD</span></div><div class="col-md-4"><span id="perid-stime'+periodLength+'"></span></div><div class="col-md-4"><span id="perid-etime'+periodLength+'"></span></div></div></div>')
        var endt = "12:30";// $("#hdVal").text();//fetching endtime of prayer
        var funOutput=calculate(endt,perHour,periodLength);//test for end time of prayer 
});

请注意我已注释掉您的变量endt和localstorage值

将值绑定到jquery中动态生成的div

2 个答案: