<?php foreach ($communities as $community) { ?> <div class="community-container"> <p><?php echo $community->Title ?></p> <button class="del-btn" data-id="<?php echo $community->ID ?>">Delete</button> </div> <?php } ?> <Script> const deleteBtns = document.getElementsByClassName('del-btn'); var deleteBtnsArray = Array.from(deleteBtns); deleteBtnsArray.map(deleteBtn => { deleteBtn.addEventListener('click', () => { const delRequest = new XMLHttpRequest(); let params = []; params = `deleteCommunity=true&communityID=${deleteBtn.dataset.id}`; delRequest.open('POST', '/ajax/delete-community'); delRequest.onreadystatechange = function() { if (delRequest.responseText === 'success') { deleteBtn.parentElement.remove(); } } delRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); delRequest.send(params); }) }) </Script>Tengo una lista de comunidades en mi página y cada elemento de la comunidad tiene un botón de eliminación. Ahora, cuando hago clic en un botón Eliminar, quiero eliminar el elemento de la comunidad relacionado.
Pero...
Puedo inspeccionar estos botones de eliminación desde el navegador y cambiar su valor data-id a otra cosa (si una data-id de un botón de eliminación es 10, puedo cambiarlo a 1000). Luego, cuando hago clic en ese botón Eliminar después de cambiar su valor de data-id desde el lado del cliente, eliminará alguna otra comunidad en lugar de corregir una. (Si existe una comunidad con ese valor data-id modificado) porque los botones data-id cambian y el código JavaScript toma ese valor para realizar la solicitud AJAX . No puedo evitar que el usuario cambie data-id desde el lado del cliente. Por lo tanto, ¿cómo puedo manejar esta situación si el usuario cambió los atributos de datos del lado del cliente?
Información extra
$communities es una matriz de objetos de la comunidad y cada elemento de la comunidad tiene un nombre y una identificación.
Podrías leer la(s) propiedad(es) de data- después de que se cargue la página. Guárdelos en una matriz o lo que sea y luego elimine la(s) propiedad(es) de data- de los elementos.
Tenga en cuenta que la validación probablemente debería ocurrir en algún lugar del lado del servidor en lugar del lado del cliente
// Wrap everything in an IIFE so we don't create global variables (() => { const ID_MAP = new WeakMap(); const onClickAction = ({ currentTarget }) => { // Exit if there is no ID stored if(!ID_MAP.has(currentTarget)) return; // Retrieve and log ID const id = ID_MAP.get(currentTarget); console.log(id); } const btns = document.querySelectorAll('button'); for(const btn of btns) { // Skip if it doesn't have an ID if(!btn.dataset.id) continue; // Store and hide `data-id` attribute ID_MAP.set(btn, btn.dataset.id); btn.removeAttribute('data-id'); // Add event listener btn.addEventListener('click', onClickAction, false); } })(); <button data-id="001">id: 001</button> <button data-id="002">id: 002</button> <button data-id="003">id: 003</button> <button data-id="004">id: 004</button> <button data-id="005">id: 005</button>EDITAR: usar sugerencias de comentarios (delegación de eventos)
// Wrap everything in an IIFE so we don't create global variables (() => { const ID_MAP = new WeakMap(); const onClickAction = ({ target }) => { // Exit if it's not a button if(target.nodeName !== 'BUTTON') return; // Exit if there is no ID stored if(!ID_MAP.has(target)) return; // Retrieve and log ID const id = ID_MAP.get(target); console.log(id); } const btns = document.querySelectorAll('button'); for(const btn of btns) { // Skip if it doesn't have an ID if(!btn.dataset.id) continue; // Store and hide `data-id` attribute ID_MAP.set(btn, btn.dataset.id); btn.removeAttribute('data-id'); } // Add event listener, instead of `document` you can also use a common parent container document.addEventListener('click', onClickAction, false); })(); <button data-id="001">id: 001</button> <button data-id="002">id: 002</button> <button data-id="003">id: 003</button> <button data-id="004">id: 004</button> <button data-id="005">id: 005</button>