使用 JavaScript 格式化附加文本

Formatting appended text using JavaScript

本文关键字：文本 格式化 JavaScript 使用      更新时间：2023-09-26

HTML 代码

<button id="btn1">show item no. 1</button>
<button id="btn2">show item no.2</button>
<div id="resulttext"></div>

JavaScript 代码

price1=20;
price2=50;
qty1=0;
qty2=0;
amount=0;
$(document).ready(function(){
    $('#btn1').click(function(){
        qty1=qty1 + 1;
        amount=price1*qty1;
        $("resultqty").change(qty1);
        $("resultprice").change(amount);
        $("#resulttext").append("<div><button type='button' id='remove1' class='close pull-right' aria-hidden='true'>&times;</button>REGULAR BURGER" + "<p> Quantity:"+qty1+"</p><p> Unit Total:"+amount+"</div>");
    })
})
$(document).on('click', 'button#remove1', function(){        
     $(this).parent().remove();
});
$(document).ready(function(){
    $('#btn2').click(function(){
        qty2=qty2 + 1;
        amount=price2*qty2;
        $("resultqty").change(qty2);
        $("resultprice").change(amount);
        $("#resulttext").append("<div><button type='button' id='remove2' class='close pull-right' aria-hidden='true'>&times;</button>SPECIAL BURGER"+ "<p> Quantity:"+qty2+"</p><p> Unit Total:"+amount+"</div>");
    })
})
$(document).on('click', 'button#remove2', function(){        
    $(this).parent().remove();
});

上面的代码实际上是有效的，但我的主要问题是，当我单击特定按钮时，必须附加的文本应该只出现一次，但数量和数量仍然应该实时变化，因为您连续单击相同的按钮。

另一件事是，我想获取两个按钮的数量之和并将其显示在页面上。

编辑：

这里是 HTML：

<button id="btn1">show item no. 1</button>
<button id="btn2">show item no.2</button>
<div id="resulttext"></div>

这里是 js：

price1=20;
price2=50;
qty1=0;
qty2=0;
amount=0;
$(document).ready(function(){
    $('#btn1').click(function(){
        qty1=qty1 + 1;
        amount=price1*qty1;
        $("resultqty").change(qty1);
        $("resultprice").change(amount);
        if($("#part1").length>0){
            $("#part1").html("<div><button type='button' id='remove1' class='close pull-right' aria-hidden='true'>&times;</button>REGULAR BURGER" + "<p> Quantity:"+qty1+"</p><p> Unit Total:"+amount+"</div>");
        }else{
            $("#resulttext").append("<div id='part1'><div><button type='button' id='remove1' class='close pull-right' aria-hidden='true'>&times;</button>REGULAR BURGER" + "<p> Quantity:"+qty1+"</p><p> Unit Total:"+amount+"</div></div>");
        }
    })
})
$(document).on('click', 'button#remove1', function(){        
    $("#part1").html("");
});

$(document).ready(function(){
    $('#btn2').click(function(){
        qty2=qty2 + 1;
        amount=price2*qty2;
        $("resultqty").change(qty2);
        $("resultprice").change(amount);
        if($("#part2").length>0){
            $("#part2").html("<div><button type='button' id='remove2' class='close pull-right' aria-hidden='true'>&times;</button>SPECIAL BURGER"+ "<p> Quantity:"+qty2+"</p><p> Unit Total:"+amount+"</div>");
        }else{
            $("#resulttext").append("<div id='part2'><div><button type='button' id='remove2' class='close pull-right' aria-hidden='true'>&times;</button>SPECIAL BURGER"+ "<p> Quantity:"+qty2+"</p><p> Unit Total:"+amount+"</div></div>");
        }
    })
});
$(document).on('click', 'button#remove2', function(){        
    $("#part2").html("");
});

在这里摆弄：http://jsfiddle.net/YLEXU/3/

将

.append（） 更改为 .html（） 并使用另一个 ID 创建新的div。

jsfiddle.net/wjkH4/
相关文章：