我有有限数量的按钮和标题，
html:
<button id = "1">1</button>
<button id = "2">2</button>
<heading id="1">heading1 <button>click</button> </heading>
<heading id="2">heading2 <button>click</button> </heading>
我希望jquery代码
我只是以两个按钮和两个标题为例，代码应该可以处理任意有限数量的按钮和标题。
正如注释中所述，id应该是唯一的，因此您可以改用类。 请尝试以下操作:
null
$('button').click(function(){
var parentTag = $(this).parent().prop("tagName")
if(parentTag != "HEADING"){ //outer button
$(`heading.${$(this).attr('class')}`).css('background-color','yellow');
}else{
$(`button.${$(this).parent().attr('class')}`).css('color','red');
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="1">1</button>
<button class="2">2</button>
<heading class="1">heading1 <button>click</button> </heading>
<heading class="2">heading2 <button>click</button> </heading>
首先，你必须使用唯一的ID，或者使用类来应用于多个元素。 我会帮你修密码的。
<button class="1">1</button>
<heading class="1">heading1 <button>click</button> </heading>
若要更改颜色，请使用下面的代码。
$(document).ready(function(){
$("button.1").click(function(){ /* when buttons with class 1 clicked */
$("button.1").css('background-color', 'yellow'); /* change color to yellow */
});
$(".1 button").click(function(){ /* when buttons inside elements with the class 1 */
$(".1 button").css('background-color', 'red'); /* change color to red */
});
});
堆栈片段-
null
$(document).ready(function(){
$("button.1").click(function(){
$("button.1").css('background-color', 'yellow');
});
$(".1 button").click(function(){
$(".1 button").css('background-color', 'red');
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="1">1</button>
<heading class="1">heading1 <button>click</button> </heading>