jQuery 背景随 id 变化

Question

这里thisid存储了html元素的id。我想使用以下代码更改其背景颜色

let thisid = 'test';
$("a#" + thisid).css("background-color", "yellow");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="test" href="#">Hello world!</a><br/>
<a id="test2" href="#">Goodbye all</a>

这不起作用，但如果我删除 thisid 并按以下方式编写它，它会起作用

 $("a").css("background-color","yellow");

但它会选择所有带有标签的

下面是我真正想做的。

$(document).ready(function() {
        // hide all questions
        $("h1").hide();
        // display first question
        $("h1#1").show();
        // show selected question
        $("a").bind('click',function(){

            let thisid = $(this).attr('id');

            $("h1").hide();
            $("h1#"+thisid).show();
            $("a#"+thisid).css("background-color","yellow");
        });

    });

Answer 1

jQuery 函数 ($()) 的参数被视为 CSS 选择器。由于您尝试通过 ID 查找元素，因此您需要启动选择器并使用 octothorpe (#)。从字符开始按标签类型选择。没有方便的 html，我猜实际的问题是 ID 为 thisid 的元素不是 <a> 标记。 （您实际上是在选择“任何带有 id thisid 的标签”，但由于 ID 是唯一的，包括标签类型选择器是多余的）

你应该可以做更多这样的事情：

let thisid = "two"
$("#"+thisid).css("background-color","yellow");
thisid = "three"
// won't work, element with id `three` is not an 'a' tag
$("a#"+thisid).css("background-color","green"); 
thisid = "four"
$("div#"+thisid).css("background-color","blue");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="one">one</div>
<div id="two">two</div>
<div id="three">three</div>
<div id="four">four</div>