0
158
Views¿Cómo agregar un botón de cierre en los elementos adjuntos?
Trabajo en un proyecto en el que uso la función Localstorage junto con la clonación y funciona bien
pero el problema es cómo agregar un incremento de número en la clase .count como si hiciera clic en save1 save2 save3 y luego el número total se muestra como <div class='count'>3</div>
Aquí está la demostración de mi código JsFiddle Demo
aquí está mi código a continuación donde intento agregar el sistema .count junto con todos los elementos agregados, pero no puedo agregar
$('.item-all .item-save').click(function() { $(this).toggleClass('productad') window.localStorage.setItem('test' + this.dataset.id, $(this).hasClass('productad')); }); $('.item-all .item-save').each(function() { var id = 'test' + this.dataset.id; if (localStorage.getItem(id) && localStorage.getItem(id) == "true") { $(this).addClass('productad'); $(this).clone().appendTo('.item-append'); } }); $(".item-all .item-save").click(function() { var existing = $(".item-append [data-id=" + $(this).data("id") + "]"); if (existing.length > 0) existing.remove(); else $(this).clone().appendTo('.item-append'); }); $(".close").click(function() { localStorage.removeItem("'test' + this.dataset.id"), $(this).removeClass('productad'); }); .item-save { position: relative; display: block; font-size: 14px; width:80px; margin: 5px; padding: 5px; background: #a5a5a5; text-align: center; cursor: pointer; } .item-all{display:flex} .productad{background:red;color:#eee} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='item-all'> <div class='item-save' data-id='123'> Save1 </div> <div class='item-save' data-id='124'> Save2 </div> <div class='item-save' data-id='125'> Save3 </div> <div class='item-save' data-id='126'> save4 </div> </div> <hr/> <div class='item-append'> <div class='count'>3</div> </div>
Cualquier tipo de ayuda o sugerencia es muy apreciada.
1 answers
Answer question0
Si marca que puede crear una función y allí crear un elemento div y agregar el elemento clonado y agregar un botón de cierre creado a partir del código, entonces puede reutilizar esa función para crear elementos desde cualquier método, solo necesita pasar el objeto seleccionado y en el método "cerrar" puede usar la función "principal" para seleccionar el elemento principal "div" y obtener la identificación del atributo desde allí, como el código a continuación.
function createItem(item){ var elemId = item.data("id"); var clonedItem = item.clone(); var newItem = $(`<div data-id="${elemId}"></div>`); newItem.append(clonedItem); newItem.append(`<button class='close'>Close</button>`) newItem.appendTo('.item-append'); } function countSaveItems(){ $('.count').html($(".item-append div.item-save[data-id]").length); } $('.item-all .item-save').click(function() { $(this).toggleClass('productad') window.localStorage.setItem('test_' + this.dataset.id, $(this).hasClass('productad')); }); $('.item-all .item-save').each(function() { var id = 'test_' + $(this).data("id"); // if (localStorage.getItem(id) && localStorage.getItem(id) == "true") { $(this).addClass('productad'); createItem($(this)); countSaveItems(); } }); $(".item-all .item-save").click(function() { var elemId = $(this).data("id"); var existing = $(`.item-append div[data-id="${elemId}"]`); if (existing.length > 0){ existing.remove(); }else{ createItem($(this)); } countSaveItems(); }); $(".item-append").on("click", ".close", function() { var id = $(this).parent().data("id"); localStorage.removeItem(`test_${id}`); $(`.item-save[data-id='${id}']`).removeClass('productad'); $(this).parent().remove(); countSaveItems(); } ); .item-save { position: relative; display: block; font-size: 14px; width:80px; margin: 5px; padding: 5px; background: #a5a5a5; text-align: center; cursor: pointer; } .item-all{display:flex} .productad{background:red;color:#eee} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='item-all'> <div class='item-save' data-id='123'> Save1 </div> <div class='item-save' data-id='124'> Save2 </div> <div class='item-save' data-id='125'> Save3 </div> <div class='item-save' data-id='126'> save4 </div> </div> <hr/> <div class='item-append'> </div>