javascript - jquery 更改函数无法与多个类一起正常工作

Question

请看代码。

$(".test").on("click", function() {
  var sclass = $(this).attr("class").split(" ")[1];
  $(".color").trigger("click");

  $(".color").on("change", function() {
    var scolor = $(this).val();
    $("." + sclass).css("background-color", scolor);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="color" name="color" class="color"><br><br>
<div class="test test1">hii</div><br><br>
<div class="test test2">hello</div>

这里我需要通过选择 color 来改变 div 的背景颜色。但是当我为一个 div 选择颜色时，这个颜色会影响到两个吗？此代码中的错误是什么？

Answer 1

要了解此错误，您需要了解 Javascript 闭包。这里有一个很好的链接来解释它，它表明这是一个很容易犯的错误(link to MDN closures)。

当您将这些函数分配给那些事件时，您就是在创建闭包，并且每个闭包共享相同的环境。无论如何，sclass 基本上都等于 test test2。您在 $("."+ sclass) 中的选择将扩展为 $(.test test2)。此外，您可能需要在 jQuery 选择中包含引号。