Форматирование добавленного текста с использованием JavaScript

Question

Форматирование добавленного текста с использованием JavaScript

0

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();
});

Приведенный выше код действительно работает, но моя основная проблема заключается в том, что при нажатии на конкретную кнопку текст, который должен быть добавлен, должен появляться только один раз, но количество и сумма должны по-прежнему меняться в режиме реального времени, когда вы непрерывно щелкаете по одной и той же кнопке,

И еще одна вещь: я хочу получить сумму суммы обеих кнопок и отобразить ее на странице.

Ritz de Guzman 21 окт. 2013, в 12:25

Источник

Теги:

javascript

jquery

2 ответа

0

измените.append() на.html() и создайте новый div с другим идентификатором.

jsfiddle.net/wjkH4/

ewwink 21 окт. 2013, в 07:43

0

это работает почти на том, что я ищу, но мне нужно отобразить оба элемента, и кнопка x будет той, чтобы удалить ее, по одному за раз. Я думаю, что не могу создать еще один div для этого, потому что id = "resulttext" является единственным идентификатором, который должен извлечь все данные.
Ritz de Guzman 21 окт. 2013, в 10:02

Ещё вопросы

это работает почти на том, что я ищу, но мне нужно отобразить оба элемента, и кнопка x будет той, чтобы удалить ее, по одному за раз. Я думаю, что не могу создать еще один div для этого, потому что id = "resulttext" является единственным идентификатором, который должен извлечь все данные.

Jonathan · Accepted Answer · 2013-10-21T07-07-00.000Z

РЕДАКТИРОВАТЬ:

Здесь 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/

это работает почти на том, что я ищу, но мне нужно отобразить оба элемента, и кнопка x будет той, чтобы удалить ее, по одному за раз. @Джонатан
@Ritz de Guzman Я редактировал скрипку http://jsfiddle.net/YLEXU/2/ . Вам нужно создать оболочку для описаний и обновлять только ее содержимое. Я обновляю Ответ тоже полным примером.
Это работает, братан! большое спасибо. @Джонатан