改变css属性取决于如果条件与右键按

Change css property depend on if condition with right key press

本文关键字：右键 条件 如果 css 属性 取决于 改变      更新时间：2023-09-26

我想改变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>

使用样式表更改背景颜色。以下是如何使用元素来跟踪其当前状态，同时控制样式的方法:

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

将计数器移出keyup事件并将其设置为1，使用triple = ===代替并将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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-div"></div>

试试这个，当你输入click right arrow或left arrow时，它会显示random color 

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

相关文章：