0

Нужно чтобы при клике на кнопку добавлялся блок div, внутри которого будут параграфы, но при добавлении они все накладываются друг на друга, что делать? Вот видео.

var newcount    = 0;
    var allprice    = 0;
    var btnn        = $("#submit_btn");
    var form        = $(".formselect");
        form.on('submit', function(e) {
        e.preventDefault();
        var product_id          = $(".info").data("product_id");
        var product_name        = $(".info").data("product_name");
        var price               = $(".info").data("product_price");
        var quantity            = $("#sel1").val();
        newprice                = allprice + (price * quantity );
        allprice                = newprice
        newcount++;
        $(".count_of_quantity").html(quantity)
        $(".count").html(newcount);
        $(".product-name").html(product_name);
        $("#price").html(newprice);

        console.log("*****")
        console.log(allprice)
        console.log("*****")
        console.log(newprice)
        $(".basket-item").append("<div class='deleteblock'>" 
                                    + "<p class='goods'>" + "Goods:" + "<span class='product-name'>" +  product_name + "</span>" + "</p>" 
                                    + "<p class='quantity'>" + "Quantity" +"<span class='count_of_quantity'></span>" + "</p>"
                                    + "<a href='#' class='deleteitem'>X</a>"
                                + "</div>");
    })

введите сюда описание изображения введите сюда описание изображения

CSS код, он разбросан, и там много где очень стоит !important, так много, потому что не смог перебить bootstrap

.basket-item {
    position: absolute;
    top: 39px;
    right: -80px;
    width: 500px;
    background-color: #fff;
    height: 200px;
    color: #000;
    font-weight: 100;
    z-index: 3333;
    overflow-y: auto;
    overflow-x: hidden; 

    border-top: 1px solid #27E760;
}

.basket-item li a {
    color: black !important;
    font-weight: 600;
}

.basket-item li a:hover {
    background-color: transparent !important;
    border: none !important;
} 

.basket-item p {
    position: absolute;
    width: 200px;
    padding: 0 0 !important;
    margin: 0 0 !important;

}

.basket-item a {
    color: #000 !important;
    text-decoration: none;
}
.basket-item a:hover {
    background-color: #ddd !important;
}

.goods {
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: left;
}


.quantity {
    left: 40%;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: left;
}


.totalprice {
    top: 35%;
    left: 0%;


}

.posss {
    position: absolute;
    bottom: 0;
    width: 100%;
    right: -20px;
}

.deleteitem {
    position: absolute;
    right: 0;
    left: 80%;
    width: 100px;
    font-size: 24px;
    font-weight: 100;

}
3
  • Проблема не в JS. Добавьте код css классов.
    – Arnial
    7 апр 2017 в 10:54
  • well done! dsadsda 7 апр 2017 в 11:02
  • Может проблема в этом ".basket-item p { position: absolute;"
    – user212578
    7 апр 2017 в 12:04

1 ответ 1

0

Просто смени div на ul и li вот к примеру

$(".basket-item ul").append('<li class="del">' + '<span class="goods">Goods:' + product_name  + '</span>' 
            + '<span class="quantity"> Quantity:' + '<span class="count_of_quantity">' + quantity + '</span>' + '</span>' 
            + '<a href="#" class="deleteitem">X</a>' + '<span class="hidden del_price">'+ full_price_per_item + '</span>' +  "</li>");
            },

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.