if( $("#infotitle1:contains('all')") ){ $("#bouton1").css( "background-color", "#BEBEBE" ); } else if ( $("#infotitle1:contains('claims')") ){ $("#bouton1").css( "background-color", "#FF8B00" ); } else { $("#bouton1").css( "background-color", "red" ); } Me gustaría modificar el color de fondo de #bouton1 dependiendo del contenido de #infotitle1
mi código no funciona, ¿alguien puede ayudarme?
Puede explorar las funciones text() e indexOf() .
El método .text() devuelve una cadena que contiene texto en el elemento coincidente.
Una vez que obtenga el texto completo dentro de un elemento, puede usar indexOf para verificar si la cadena contiene una subcadena.
if ($("#infotitle1").text().indexOf("all") >= 0) { $("#bouton1").css( "background-color", "#BEBEBE" ); } else if ($("#infotitle1").text().indexOf("claims") >= 0) { $("#bouton1").css( "background-color", "#FF8B00" ); } else { $("#bouton1").css( "background-color", "red" ); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="infotitle1">claims</div> <div id="bouton1">George Martin</div>Verificar si un selector dado devuelve un objeto requería un paso más... en este caso verifico la length > 0 por ejemplo.
Modifiqué ligeramente su código para hacer que las identificaciones fueran parámetros para poder mostrar todos los resultados:
styleButton('bouton1','infotitle1'); styleButton('bouton2','infotitle2'); styleButton('bouton3','infotitle3'); function styleButton(idButton, idTitle){ if( $(`#${idTitle}:contains(all)`).length > 0 ){ $(`#${idButton}`).css( "background-color", "#BEBEBE" ); } else if ( $(`#${idTitle}:contains(claims)`).length > 0 ){ $(`#${idButton}`).css( "background-color", "#FF8B00" ); } else { $(`#${idButton}`).css( "background-color", "red" ); } } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="infotitle1">all</div> <button id="bouton1">Button1</button> <div id="infotitle2">claims</div> <button id="bouton2">Button2</button> <div id="infotitle3">other</div> <button id="bouton3">Button3</button>