如何根据状态触发事件处理程序？

Question

I'm trying to create a grid with hover effects. 我正在尝试创建具有悬停效果的网格。 If you hover over an grid-div it should set a background-color and when you hover over it again it should remove the background-color. 如果将鼠标悬停在grid-div上，则应设置背景色，当再次将其悬停在其上时，则应删除背景色。
My problem is once i have set the color and remove it by hovering, it doesn't let me apply the background color once more. 我的问题是，一旦我设置了颜色并通过悬停将其删除，它就不允许我再次应用背景颜色。 I've tried to set my event handlers inside if statements with a 1/0 variable pseudo-switch. 我试图将事件处理程序设置在带有1/0变量伪开关的if语句中。

What am i doing wrong? 我究竟做错了什么？

EDIT: How to make the actual event handler a toggle. 编辑：如何使实际的事件处理程序切换。

http://codepen.io/cgonen/pen/MJqVpQ http://codepen.io/cgonen/pen/MJqVpQ

 $(function(){ var size = 16 var width = 600 / size createGrid(size, width) hover() }) function createGrid(size, width) { for (var j = 0; j < size; j++) { for (var i = 0; i < size; i++) { $('.grid').append('<div class="vlak"></div>') } } $('.vlak').css("width", width) $('.vlak').css("height", width) } function hover() { var active = 0; $('.vlak').on('mouseenter', function () { $(this).css("background-color", "red") active = 1; if (active = 1) { $(this).on('mouseenter', function () { $(this).css("background-color", "") active = 0; }) } }) }

 /* // Snippets section below. // Border-box snippet */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } /* // clearfix snippet */ .clearfix:before, .clearfix:after { content:""; display:block; clear:both; } /* // End of snippets section. */ .wrapper { width: 600px; margin: 0 auto; // border: 1px solid black; } .grid { box-sizing: content-box; line-height: 0; margin: 0; padding: 0; outline: 1px solid black; } .vlak { box-sizing: border-box; float: left; width: 50px; height: 50px; line-height: 0; margin: 0; padding: 0; border: 1px solid black; } /* // questions for myself: // Why setting border changes total size of div? I've set box-sizing to border-box or content-box accordingly, // but that didn't work forcing me to use 'outline'. */

 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content = "width=device-width", initiat-scale="1.0"> <title>Document</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="styles/styles.css"> </head> <body> <div class="wrapper"> <div class="header"> <h1>HoverMatic</h1> <p>General description placeholder</p> <input type="number" value="16" placeholder="grid size"> <select name="colors" id=""> <option value="black">black</option> <option value="blue">blue</option> <option value="green">green</option> <option value="pink">pink</option> <option value="red">red</option> <option value="yellow">yellow</option> </select> <button>clear grid</button> </div> <div class="grid clearfix"></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="scripts/main.js"></script> </body>

Answer 1

You don't need to attach a second event listener; 您不需要附加第二个事件侦听器。 and also you need === for testing equality: x = 1 is an assignment. 并且还需要===来测试相等性： x = 1是分配。

function hover() {
    var active = 0;

    $('.vlak').on('mouseenter', function () {
        if (active == 1) {
          $(this).css("background-color", "")
          active = 0;
        }

        else {
          $(this).css("background-color", "red")
          active = 1;
        }
    })
}

Answer 2

Use a class to toggle the color: 使用一个类来切换颜色：

 $(function(){ var size = 16 var width = 600 / size createGrid(size, width) hover() }) function createGrid(size, width) { for (var j = 0; j < size; j++) { for (var i = 0; i < size; i++) { $('.grid').append('<div class="vlak"></div>') } } $('.vlak').css("width", width) $('.vlak').css("height", width) } function hover() { $('.vlak').on('mouseenter', function () { $(this).toggleClass('red'); }) }

 /* // Snippets section below. // Border-box snippet */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } /* // clearfix snippet */ .clearfix:before, .clearfix:after { content:""; display:block; clear:both; } /* // End of snippets section. */ .wrapper { width: 600px; margin: 0 auto; // border: 1px solid black; } .grid { box-sizing: content-box; line-height: 0; margin: 0; padding: 0; outline: 1px solid black; } .vlak { box-sizing: border-box; float: left; width: 50px; height: 50px; line-height: 0; margin: 0; padding: 0; border: 1px solid black; } .red { background-color:red; } /* // questions for myself: // Why setting border changes total size of div? I've set box-sizing to border-box or content-box accordingly, // but that didn't work forcing me to use 'outline'. */

 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content = "width=device-width", initiat-scale="1.0"> <title>Document</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="styles/styles.css"> </head> <body> <div class="wrapper"> <div class="header"> <h1>HoverMatic</h1> <p>General description placeholder</p> <input type="number" value="16" placeholder="grid size"> <select name="colors" id=""> <option value="black">black</option> <option value="blue">blue</option> <option value="green">green</option> <option value="pink">pink</option> <option value="red">red</option> <option value="yellow">yellow</option> </select> <button>clear grid</button> </div> <div class="grid clearfix"></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="scripts/main.js"></script> </body>

You may be looking for something like: 您可能正在寻找类似的东西：

 $(function() { var size = 16 var width = 600 / size createGrid(size, width) hover() }) function createGrid(size, width) { for (var j = 0; j < size; j++) { for (var i = 0; i < size; i++) { $('.grid').append('<div class="vlak"></div>') } } $('.vlak').css("width", width) $('.vlak').css("height", width) } function hover() { var isActive = false; $('.vlak').on('click', function() { isActive = !isActive; }) $('.vlak').on('mouseenter', function() { if (isActive) { $(this).toggleClass('red'); } }) }

 /* // Snippets section below. // Border-box snippet */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } /* // clearfix snippet */ .clearfix:before, .clearfix:after { content: ""; display: block; clear: both; } /* // End of snippets section. */ .wrapper { width: 600px; margin: 0 auto; // border: 1px solid black; } .grid { box-sizing: content-box; line-height: 0; margin: 0; padding: 0; outline: 1px solid black; } .vlak { box-sizing: border-box; float: left; width: 50px; height: 50px; line-height: 0; margin: 0; padding: 0; border: 1px solid black; } .red { background-color: red; } /* // questions for myself: // Why setting border changes total size of div? I've set box-sizing to border-box or content-box accordingly, // but that didn't work forcing me to use 'outline'. */

 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width" , initiat-scale="1.0"> <title>Document</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="styles/styles.css"> </head> <body> <div class="wrapper"> <div class="header"> <h1>HoverMatic</h1> <p>General description placeholder</p> <input type="number" value="16" placeholder="grid size"> <select name="colors" id=""> <option value="black">black</option> <option value="blue">blue</option> <option value="green">green</option> <option value="pink">pink</option> <option value="red">red</option> <option value="yellow">yellow</option> </select> <button>clear grid</button> </div> <div class="grid clearfix"></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="scripts/main.js"></script> </body>

Answer 3

I have changed your hover method little bit and i hope this will solve your issue. 我已经稍微更改了您的悬停方法，希望这能解决您的问题。

function hover() {

$('.vlak').on('mouseenter', function () {
    if(this.getAttribute("style").indexOf('red') < 0) {

        $(this).css("background-color", "red")
    } else {
        $(this).css("background-color", "white");
    }
})

}

Please let me know this is helpful or not ? 请让我知道这是否有用？

You can see live demo 您可以观看现场演示

Code pen demo 代码笔演示

如何根据状态触发事件处理程序？

问题描述

3 个解决方案

解决方案1
0 2017-02-08 10:35:24

解决方案2
0 已采纳 2017-02-08 10:37:27

解决方案3
0 2017-02-08 10:59:05

如何根据状态触发事件处理程序？

问题描述

3 个解决方案

解决方案1 0 2017-02-08 10:35:24

解决方案2 0 已采纳 2017-02-08 10:37:27

解决方案3 0 2017-02-08 10:59:05

解决方案1
0 2017-02-08 10:35:24

解决方案2
0 已采纳 2017-02-08 10:37:27

解决方案3
0 2017-02-08 10:59:05