Question

以下代码有效。它会创建一个小的下拉菜单（HTML选择元素），用于更改“我的测试文本”的颜色。

<script src="jquery-2.0.3.min.js"></script>

<p id="color-target">MY TEST TEXT</p>

<label for="test-menu">My Menu Label</label>
<select id="test-menu">
    <option>red
    <option>green
    <option>blue
    <option>magenta
</select>

<script>
$("#test-menu").on("change", function(e) {
    $("#color-target").css("color", $(this).find("option:selected").val());
});
</script>

我作为测试的一部分以各种方式编写了这段代码，并对它以这种形式工作感到惊讶。对我来说，神秘的是，为什么“$（this）”指的是“select＃test-menu”元素而不是“p＃color-target”元素？我认为$（this）在引用包含对象的对象的方法中使用，但在此代码中，$（this）在Object P的.css（）方法中使用，它本身在匿名函数中使用，然后在Object S的.on（）方法中使用，因此$（this）同时在多个函数中使用。我假设在这种情况下$（this）会引用最里面的包含对象p＃color-target，但在这里它不会。

为什么不呢？

（我用jQuery和JavaScript标记这个，因为我不知道答案是否特别适用于jQuery的“$（this）”，或者更普遍地适用于JavaScript的“this”。）

Answer 1

因为您在"#test-menu"中选择了$("#test-menu").on(...，并且在函数$(this)内引用了#test-menu element

$（this）在匿名函数内的匿名函数中引用的规则

1 个答案: