tengo un html como este
<div class="container"> <select class="product-select" id="product-selections"> <option data-option-1="M" data-option-2="cream" data-available="true" value="31979558568034">M / cream</option> <option data-option-1="M" data-option-2="yellow" data-available="false" value="31979558568035">M / yellow</option> <option data-option-1="M" data-option-2="red" data-available="true" value="31979558568036">M / red</option> <option data-option-1="M" data-option-2="green" data-available="false" value="31979558568037">M / green</option> <option data-option-1="M" data-option-2="blue" data-available="false" value="31979558568038">M / blue</option> </select> <div class="colors"> <span class="creme">Creme</span> <span class="blue">Blue</span> <span class="yellow">Yellow</span> <span class="red">Red</span> <span class="green">Green</span> </div> </div>Quiero agregar la clase "no disponible" para abarcar elementos que tengan una clase que coincida con el valor de la opción de datos 2 en el elemento de opción en el menú desplegable con el atributo datos disponibles = falso.
Por ejemplo:
<option data-option-1="M" data-option-2="yellow" data-available="false" value="31979558568034">M / yellow</option>Tiene datos disponibles = "falso" y datos-opción-2 = "amarillo", por lo que quiero agregar la clase "no disponible" a Amarillo, ya que tiene la clase amarilla que coincide con el valor de datos-opción-2 que tiene datos disponibles = falso. Así que el resultado debería ser algo como esto:
<div class="colors"> <span class="creme">Creme</span> <span class="blue not-available">Blue</span> <span class="yellow not-available">Yellow</span> <span class="red">Red</span> <span class="green not-available">Green</span> </div>Gracias por toda la ayuda. Realmente lo aprecio.
$('#product-selections > option[data-available=false]').each(function(){ let dataOption2 = $(this).attr('data-option-2'); $('div.colors > span.' + dataOption2).addClass('not-available'); }); .not-available { text-decoration: line-through; background-color: red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <div class="container"> <select class="product-select" id="product-selections"> <option data-option-1="M" data-option-2="cream" data-available="true" value="31979558568034">M / cream</option> <option data-option-1="M" data-option-2="yellow" data-available="false" value="31979558568035">M / yellow</option> <option data-option-1="M" data-option-2="red" data-available="true" value="31979558568036">M / red</option> <option data-option-1="M" data-option-2="green" data-available="false" value="31979558568037">M / green</option> <option data-option-1="M" data-option-2="blue" data-available="false" value="31979558568038">M / blue</option> </select> <div class="colors"> <span class="creme">Creme</span> <span class="blue">Blue</span> <span class="yellow">Yellow</span> <span class="red">Red</span> <span class="green">Green</span> </div> </div>Para comenzar, solo un recordatorio rápido, porque Html solo no es un lenguaje interactivo que pueda cambiar las cosas automáticamente en función de la acción, porque automáticamente implica un comportamiento después de una acción. Porque lo que implemente en Html por reglas css se mostrará y no "agregará" ni "eliminará" ninguna propiedad html a otro elemento sin un evento para activarlo. Lo que quiero decir es que necesita javascript o ajax para hacer el trabajo más fácil y de la manera adecuada. En una aplicación de la vida real, los datos disponibles deben ser información proveniente de la base de datos, y esto es otra cosa a considerar. Supongamos que tiene que codificarlo configurando datos en la vista. luego, deberá agregar un detector de eventos al elemento Seleccionar, de modo que tan pronto como el usuario haga clic en él para seleccionar su elección, se agregará la información adecuada al elemento de intervalo . Llamemos a esa función mySelecledItem(). Lo tendrás así en la etiqueta select :
<select class="product-select" id="product-selections onSelect=mySelected()">Y luego definirá la función javascript en su archivo javascript o directamente en la etiqueta de su archivo html. Usted puede tener:
<script> function mySelected() { const newSpan = document.querySelector('.blue'); newSpan.classList.add('not-available'); } </script>Tenga en cuenta esto:
> document.querySelector('.blue')seleccionará la clase "azul" y
> newSpan.classList.add('not-available')agregará a esa clase 'no disponible' Esta es una descripción general de cómo puede agregar automáticamente el "no disponible" a otra clase. Necesitarás javascript o Ajax.