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

时间:2017-02-08 10:31:22

标签: javascript jquery

我尝试使用悬停效果创建网格。如果将鼠标悬停在grid-div上,则应设置背景颜色,当您将鼠标悬停在它上面时,应删除背景颜色。
我的问题是,一旦我设置了颜色并通过悬停移除它,它不会让我再次应用背景颜色。我试图将if事件处理程序设置在带有1/0变量伪开关的语句中。

我做错了什么?

编辑:如何使实际的事件处理程序切换。

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;

            })
        }
    })

}
&#13;
/* // 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'.  */
&#13;
<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>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:0)

您无需附加第二个事件监听器;并且您还需要===来测试相等性: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;
        }
    })
}

答案 1 :(得分:0)

使用班级来切换颜色:

&#13;
&#13;
$(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');
    })

}
&#13;
/* // 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'.  */
&#13;
<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>
&#13;
&#13;
&#13;

你可能正在寻找类似的东西:

&#13;
&#13;
$(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');
    }
  })

}
&#13;
/* // 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'.  */
&#13;
<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>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

我已经改变了你的悬停方法,我希望这会解决你的问题。

function hover() {

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

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

}

请告诉我这是否有帮助?

你可以看到现场演示

Code pen demo