Question

我遇到了困难，用户点击并且它不是后台代码，再次点击必须返回上一个。这种情况正在发生，但是所有这一切都没有发生，就像jquery只执行一次一样。

偶数段落有颜色，奇数段落有颜色。

＆＃13;

<!DOCTYPE html>
<html>
<body>

<style>

p:nth-child(2n+1){
 	color: green;
    background-color: red;
}

p:nth-child(2n){
color: yellow;
background-color:blue;
}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>

<script>

      $('p:nth-child(2n+1)').click(function(){
     $(this).css('background-color','black').css('color','white');
     $('p:nth-child(2n+1)').click(function(){
        $(this).css('background-color','red').css('color','green');
    });    
  });

    $('p:nth-child(2n)').click(function(){
    $(this).css('background-color','black').css('color','white');
     $('p:nth-child(2n)').click(function(){
        $(this).css('background-color','blue').css('color','yellow');
    });
   
  });


</script>


</body>
</html>

＆＃13;

Answer 1

首先，您不需要两次注册点击事件，或者为奇数和事件分开事物，您可以切换课程：

＆＃13;

$(function(){
  // p:nth-child(2n), p:nth-child(2n+1)
  // p:even, p:odd
  // p
  $('p').click(function() {
    $(this).toggleClass("blackwhite");
  });
});

＆＃13;

p:nth-child(2n+1){
 	color: green;
  background-color: red;
}

p:nth-child(2n){
  color: yellow;
  background-color:blue;
}

p.blackwhite {
  background-color:black;
  color:white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>

＆＃13;

Answer 2

您的代码中不清楚function()是什么。

您可能想要检查一下： Change background color of a page using php

Answer 3

希望这有帮助！

$('p:nth-child(2n+1)').click(function(){
     if($(this).hasClass('click-child'))
        $(this).removeClass('click-child').addClass('odd-child');
     else
        $(this).removeClass('odd-child').addClass('click-child');
});

$('p:nth-child(2n)').click(function(){
     if($(this).hasClass('click-child'))
        $(this).removeClass('click-child').addClass('even-child');
     else
        $(this).removeClass('even-child').addClass('click-child');
});

.odd-child{
color: yellow;
background-color:blue;
}

.even-child{
color: green;
background-color:red;
}

.click-child{
color: white;
background-color:black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="even-child">1</p>
<p class="odd-child">2</p>
<p class="even-child">3</p>
<p class="odd-child">4</p>
<p class="even-child">5</p>
<p class="odd-child">6</p>

Answer 4

我认为@nullqube回答toggleClass是最好的方法，但也可以使用If-Else语句来完成：

＆＃13;

$('p:nth-child(2n+1)').click(function(){
     if($(this).css('background-color') == 'rgb(0, 0, 0)'){
       $(this).css('background-color','red').css('color','green'); 
     } else {
       $(this).css('background-color','black').css('color','white');
     }
  });

  $('p:nth-child(2n)').click(function(){
     if($(this).css('background-color') == 'rgb(0, 0, 0)'){
       $(this).css('background-color','blue').css('color','yellow');      
     } else {
       $(this).css('background-color','black').css('color','white');
     }
  });

＆＃13;

p:nth-child(2n+1){
 	color: green;
  background-color: red;
}

p:nth-child(2n){
  color: yellow;
  background-color:blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>

＆＃13;

单击时更改文本颜色

4 个答案: