Question

请看代码。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

Answer 1

您应该使用关闭，然后

$(".test").on("click", function() {
  var $el=$(this);
  $(".color").off("change").on("change", function() {
     $el.css("background-color",  $(this).val());
  }).click();
});

<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>

Answer 2

为了理解这个bug，你需要了解Javascript闭包。这里有一个很好的链接可以解释它，它揭示了这是一个非常容易犯的错误（link to MDN closures）。

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

Answer 3

您遇到的问题是因为您在每次点击时向颜色输入添加了一个新的change处理程序。这意味着当您在.test1上创建新元素时，第一个处理程序将附加到.test2元素。这就是为什么这两个元素随后都会受到变化的影响。

您需要将change处理程序移到click处理程序之外。然后，您可以直接存储元素的引用而不是类。试试这个：

＆＃13;

$(".test").on("click", function() {
  $(".color").data('el', $(this)).trigger("click");
});

$(".color").on("change", function() {
  var $el = $(this).data('el');
  $el && $el.css("background-color", this.value);
});

＆＃13;

<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>

＆＃13;

jquery更改函数与多个类无法正常工作

3 个答案: