Question

我想改变css属性取决于if-condition，如果用户按右键改变具有特定颜色的背景，如果再次按下将背景颜色改为其他颜色，则意味着什么。

$(document).ready(function() {
  $(document).keyup(function(e) {
    var counter = 0;
    switch (e.which) {
      case 39: // right
        if (counter == 1) {
          $(".my-div").css("background-color", "red");
          counter = counter + 1;
        }
        if (counter == 2) {
          $(".my-div").css("background-color", "yellow");
          counter = counter + 1;
        }
        if (counter == 3) {
          $(".my-div").css("background-color", "green")
          counter = counter + 1;
        }
        break;
      default:
        return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
  });
  console.log(counter);
})

.my-div {
  width: 1170px;
  height: 500px;
  margin: 50px auto;
  background-color: #0026ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-div"></div>

Answer 1

使用样式表进行背景颜色更改。以下是如何在同时控制样式的同时使用元素跟踪其当前状态：

$(document).ready(function() {

  $(document).keyup(function(e) {
    var counter = $(".my-div").attr('rcount') || 0;

    //Resets to state0. Uncomment to stop after third trigger:
    //if (counter < 3) 
       counter = (++counter % 4);

    switch (e.which) {
      case 39: // right
          $(".my-div").attr("rcount", counter);
          break;
      default:
        return;
    }
    e.preventDefault(); 
  });
})

.my-div {
  width: 200px;
  height: 500px;
  margin: 50px auto;
  background-color: #0026ff;
}

.my-div[rcount='0'] { background-color: #0026ff;}
.my-div[rcount='1'] { background-color: red;}
.my-div[rcount='2'] { background-color: yellow; }
.my-div[rcount='3'] { background-color: green; }

/* Debug styles added to show current rcount value */
.my-div.debug { position:relative; }
.my-div.debug:before { 
  content: 'rcount ' attr( rcount );
  color:white;
  text-shadow:1px 1px 1px black;
  position:absolute;
  left:0;
  top:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-div debug"></div>

Answer 2

将计数器移出Hero事件并将其设置为keyup，使用三等于1并将===添加到条件中，以便检查条件然后转到下一个，在这些条件内增加else：

counter

$(document).ready(function() {
  var counter = 1;
  
  $(document).keyup(function(e) {
    switch (e.which) {
      case 39: // right
        if (counter === 1) {
          $(".my-div").css("background-color", "red");
          counter++;
        }else if (counter === 2) {
          $(".my-div").css("background-color", "yellow");
          counter++;
        }else if (counter === 3) {
          $(".my-div").css("background-color", "green")
          counter=1;
        }
        break;
      default:
        return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
  });
  
})

.my-div {
  width: 117px;
  height: 50px;
  margin: 50px auto;
  background-color: #0026ff;
}

Answer 3

试试这个，当random color click或right arrow

时，会显示left arrow

<html>
<head></head>
<title></title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
.changeme{
    width: 300px;
    height: 300px;
    background-color: orange;
}



</style>

<body>

<div class="changeme"></div>


</body>

<script type="text/javascript">

$("body").keydown(function(e){
    if(e.keyCode == 37)//when you click the left arrow button
    {
        var theColor = getRandomColor();
        $(".changeme").css({"background-color":theColor});
    }
    else if(e.keyCode == 39)//when you click right arrow button
    {
        var theColor = getRandomColor();
        $(".changeme").css({"background-color":theColor});
    }
});


//generate a random color
function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

</script>

</html>

更改css属性取决于条件是否按右键

3 个答案: