Tengo una etiqueta html p como se muestra a continuación
<p class="card-about-bambo-number card-aboot-mahagany-number">0 <spam>left</spam></p>También tengo un botón que me gustaría desactivar cuando la etiqueta p tiene un 0 en.
He intentado hacer esto tanto en JavaScript como en jquery.
Intenté usar include pero esto no funcionó, también intenté usar contains.
Aquí está el código que he cansado.
$(document).ready(() => { if ($(".card-about-mahagany-number:contains('0')")) { $('.btn-about-mahagany').attr('disabled', 'disabled'); $('.card-about-mahagany-body').addClass('card-zero'); } }); const numberText = document.getElementsByClassName('card-aboot-mahagany-number'); const buttonOut = document.getElementsByClassName('btn-about-mahagany'); //buttonOut.disabled = true; if (numberText.textContent.includes('0')) { buttonOut.disabled = true; } <p class="card-about-bambo-number card-aboot-mahagany-number">0 <spam>left</spam></p> <button class="btn btn-select btn-about-mahagany btn-primary" disabled="false">Out of Stock</button>document.getElementsByClassName devuelve un objeto similar a una matriz de los elementos con esa clase.
Prueba esto:
for (let i = 0; i < numberText.length; i++) { if (numberText[i].textContent.includes("0")) { for (let i = 0; i < buttonOut.length; i++) { buttonOut[i].disabled = true; } } }Primero, cambiemos de <spam> a <span> .
En segundo lugar, tratamos de crear un código simple para una sola tarjeta. En este caso, si cambia el valor de 0 a 1, verá el botón. Si cambia el valor de 1 a 0, el botón no aparecerá cuando lo ejecute.
$(document).ready(() => { console.log('document ready'); let card = $('p.card-about-bambo-number'); console.log(card.text()); let value = +card.text().replace(/\D+/g, ""); console.log('value: ', value); console.log('value type: ', typeof(value)); $('#btn').toggle(value > 0); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p class="card-about-bambo-number card-aboot-mahagany-number">0 <span>left</span></p> <button id="btn">Button</button>Tercero, modifiquemos esto para que funcione con más de una tarjeta:
$(document).ready(() => { let cards = $('p.card-about-bambo-number'); cards.each(function() { let card = $(this); let value = +card.text().replace(/\D+/g, ""); card.next('#btn').toggle(value > 0); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p class="card-about-bambo-number card-aboot-mahagany-number">0 <span>left</span></p> <button id="btn">Button</button> <hr/> <p class="card-about-bambo-number card-aboot-mahagany-number">1 <span>left</span></p> <button id="btn">Button</button> Usando la clase card-about-bambo-number , iteraremos a lo largo de todos los elementos que tienen esa clase.
Para cada tarjeta, usaremos el método text para extraer el texto, luego usamos la expresión regular para eliminar cualquier cosa que no sea un dígito, luego convertimos el número de una cadena a un número usando + delante (un "truco de javascript "), y con eso obtenemos el número.
Finalmente, indicamos que quiere el hermano más cercano a ese elemento que contiene dicha clase, para alternar (mostrar/ocultar) dependiendo si el valor es mayor que cero.
Espero que esto ayude.
el contenido del texto debe ser HTML interno