我是jQuery的新手。这次,我尝试使用jQuery产生双重效果。

例如,当您单击单词时,其颜色首先变为红色。当您再次单击它时,其颜色变为蓝色。

所以我用下面的代码,但是效果不佳。

$(document).ready(function () {
  $("p#origin").click(function () {
    $(this).css("color", "red");
    $(this).addClass("clicked");
  });

  $("p.clicked").click(function () {
    $(this).css("color", "blue");
  });
});


您可以在here上查看结果

我也试过了。

var toggle = 0;
console.log("toggle", toggle);

$(document).ready(function () {
  if (toggle == 0) {
    $("p#origin").click(function () {
      $(this).css("color", "red");
      toggle = 1;
      console.log("toggle:", toggle);
    });
  } else {
    $("p#origin").click(function () {
      $(this).css("color", "blue");
      toggle = 0;
      console.log("toggle", toggle);
    });
  }
});


上面的代码结果可见here。变量toggle设置为1,但是不起作用。

我的问题很好吗?我是新来的,所以我不知道JavaScript代码是如何加载的。 (我还需要帮助来研究此事...)

我希望任何解决方案都能起到双重作用。 (任何人都可以修复我的上述2个代码以使其正常工作吗?)

最佳答案

问题在于您正在处理动态选择器,即您希望根据选择器的动态评估来更改事件,在这种情况下,您需要使用event delegation

但是在这种情况下,您不需要这样做,假设起初p#origin没有蓝色,您可以执行以下操作



$(document).ready(function() {
  $("p#origin").click(function() {
    $(this).toggleClass("clicked").toggleClass('unclicked', !$(this).hasClass('clicked'));
  });
});

#origin.unclicked {
  color: blue;
}
#origin.clicked {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p id="origin">origin</p>







但是,如果p#origin在第一次单击之前具有蓝色,则可以将其简化为



$(document).ready(function() {
  $("p#origin").click(function() {
    $(this).toggleClass("clicked");
  });
});

#origin {
  color: blue;
}
#origin.clicked {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p id="origin">origin</p>

09-10 12:08
查看更多