如何用id1内容修改id2背景色

Question

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" );
}

我想根据#infotitle1的内容修改#bouton1的背景色

我的代码不工作，有人可以帮助吗?

Answer 1

您可以探索text()和indexOf()函数。

.text()方法返回一个字符串，其中包含匹配元素中的文本。

一旦你在一个元素中获得了整个文本，你可以使用indexOf来检查字符串是否包含子字符串。

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>

Answer 2

检查给定的选择器是否返回对象需要进一步的步骤。在这种情况下，我检查length > 0例如。

我稍微修改了你的代码，使id作为参数，以便我可以显示所有的结果:

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>