如何使用jQuery处理类（由jQuery创建）？

Question

我是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个代码吗？）

Answer 1

问题是你正在处理动态选择器，即你希望处理的事件根据选择器的动态评估而改变，在这种情况下你需要使用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>

Answer 2

只是一个想法，而不是使用.class：

循环一系列样式（您可以使用所需的样式/步数）

var c = ["#000", "#f00", "blue"];

$("#origin").click(function(){
  c.push(c.shift());                 // Put first array color to last place
  $(this).css({color: c[0] });       // Always use the 0 key
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="origin">Click to Toggle Color</p>

如果您想要更改更多而不仅仅是颜色：

var c = [
  {color:"#000",    background:"#ffe",    fontSize:16},
  {color:"fuchsia", background:"yellow",  fontSize:24},
  {color:"#1CEA6E", background:"#C0FFEE", fontSize:36}
];

$("#origin").click(function(){
  c.push(c.shift());
  $(this).css(c[0]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="origin">Click to loop styles</p>

Answer 3

我刚刚修改了一些JavaScript代码。

    var $origin;
    $origin = $('#origin');
    return $origin.on('click', function() {
      if ($origin.hasClass('red')) {
        $origin.css('color', 'yellow');
        $origin.addClass('yellow');
        return $origin.removeClass('red');
      } else {
        $origin.css('color', 'red');
        $origin.addClass('red');
        return $origin.removeClass('yellow');
      }
    });