HTML

Question

我正在为评级系统制作一个小脚本，目前有3个功能：

onHover选项：

a. On mouse enter change the color of div depending on value
b. On mouse leave revert back to white

的onclick：
```
a. On click save color change and put value in another div
```
现在我需要检查是否在mouseleave之前点击了其中一个div，因为我需要的颜色与当你选择它时离开div时鼠标点击的颜色保持一致。

我该如何检查？

这是我的div结构：

<div class='rating' data-target="tijd">
    <div class='circle'>1</div>//green
    <div class='circle'>2</div>//green
    <div class='circle'>3</div>//green
    <div class='circle'>4</div>//green
    <div class='circle'>5</div>//green
    <div class='circle'>6</div>//green
    <div class='circle'>7</div>//green
    <div class='circle'>8</div>//white
    <div class='circle'>9</div>//white
    <div class='circle'>10</div>//white
    <div class='score'><span id="tijd">7</span></div>
</div>

所以$('.circle').on('hover', function(e){}, function(e){})然后是$('.circle').on('click', function(e){})所以click函数会被鼠标离开函数覆盖，因为稍后会调用mouseleave函数。

（我已经尝试检查点击该值的div是否为空，但它永远不会出现）

＆＃13;

$('.circle').hover(function(e) {
  $(this).siblings().css('background-color', 'white')
  val = parseInt($(this).text(), 10)
  $(this).prevAll('.circle').each(function() {
    if (val < 4 && val > 0)
      $(this).css('background-color', 'red')
    if (val < 7 && val > 3)
      $(this).css('background-color', 'orange')
    if (val < 11 && val > 6)
      $(this).css('background-color', 'green')
  })
  val = parseInt($(this).text(), 10)
  console.log(val)
  if (val < 4 && val > 0)
    $(this).css('background-color', 'red')
  if (val < 7 && val > 3)
    $(this).css('background-color', 'orange')
  if (val < 11 && val > 6)
    $(this).css('background-color', 'green')
}, function(e) {
  spanid = spanid = $(this).parent().attr('data-target')
  text = $('#' + spanid).text()
  console.log(text)
  if ($('#' + spanid) == '') {
    $(this).siblings('.circle').css('background-color', 'white')
    $(this).css('background-color', 'white')
  } else {
    val = parseInt(text, 10)
    if (val < 4 && val > 0)
      color = 'red'
    if (val < 7 && val > 3)
      color = 'orange'
    if (val < 11 && val > 6)
      color = 'green'
    $(this).prevAll('.circle').each(function() {
      if ($(this).text() <= text) {
        console.log('smaller or equal to')
        next.css('background-color', color)
      }
      if (text.val() == "") {
        $(this).css('background-color', 'white')

      } else {
        console.log('bigger')
        $(this).css('background-color', 'white')
      }
    })
  }
})
$('.circle').click(function(e) {
  console.log('get clicked')
  spanid = $(this).parent().attr('data-target')
  val = parseInt($(this).text(), 10)
  $('#' + spanid).text(val)
  console.log('Value = ' + val)
  next = $('#' + spanid).parent()
  if (val < 4 && val > 0)
    color = 'red'
  if (val < 7 && val > 3)
    color = 'orange'
  if (val < 11 && val > 6)
    color = 'green'
  next.css('background-color', color)
  $(this).prevAll('.circle').css('background-color', color)

})

＆＃13;

.reviews {
  background-color: white;
  display: table;
  width: 100%;
}
.rating {
  display: table;
  table-layout: fixed;
  border-spacing: 10px;
}
.circle {
  display: table-cell;
  height: 25px;
  width: 25px;
  text-align: center;
  border: solid 2px black;
  border-radius: 100%;
  background-color: white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group col-md-10 col-md-offset-2">
  <label>Tarief</label>
  <div class='rating' data-target="tarief">
    <div class='circle'>1</div>
    <div class='circle'>2</div>
    <div class='circle'>3</div>
    <div class='circle'>4</div>
    <div class='circle'>5</div>
    <div class='circle'>6</div>
    <div class='circle'>7</div>
    <div class='circle'>8</div>
    <div class='circle'>9</div>
    <div class='circle'>10</div>
    <div class='score'><span id="tarief"></span>
    </div>
  </div>
</div>
<div class="form-group col-md-10 col-md-offset-2">
  <label>Reactietijd en bereikbaarheid</label>
  <div class='rating' data-target="tijd">
    <div class='circle'>1</div>
    <div class='circle'>2</div>
    <div class='circle'>3</div>
    <div class='circle'>4</div>
    <div class='circle'>5</div>
    <div class='circle'>6</div>
    <div class='circle'>7</div>
    <div class='circle'>8</div>
    <div class='circle'>9</div>
    <div class='circle'>10</div>
    <div class='score'><span id="tijd"></span>
    </div>
  </div>
</div>

＆＃13;

Answer 1

我会用CSS和一个类来做：

使用CSS :hover规则设置鼠标光标在元素上的颜色
点击后，在元素上设置一个类，表明它已被选中
根据该类

示例：

＆＃13;
＆＃13;
$(document.body).on("click", ".rating > .circle", function() { $(this).toggleClass("selected").siblings().removeClass("selected"); });
＆＃13;
.rating { padding: 2px; } .rating .circle { padding: 6px; display: inline-block; width: 2em; text-align: center; } /* When hovering, use a yellow background */ .rating > .circle:hover { background-color: yellow; } /* Selected items have a blue background and white text */ .rating > .circle.selected, .rating > .circle.selected:hover { background-color: blue; color: white }
＆＃13;
<div class="rating"> <div class="circle">1</div> <div class="circle">2</div> <div class="circle">3</div> <div class="circle">4</div> <div class="circle">5</div> <div class="circle">6</div> <div class="circle">7</div> <div class="circle">8</div> <div class="circle">9</div> <div class="circle">10</div> </div> <div class="rating"> <div class="circle">1</div> <div class="circle">2</div> <div class="circle">3</div> <div class="circle">4</div> <div class="circle">5</div> <div class="circle">6</div> <div class="circle">7</div> <div class="circle">8</div> <div class="circle">9</div> <div class="circle">10</div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
＆＃13;
＆＃13;
＆＃13;

Answer 2

假设元素的默认背景颜色定义为

div.rating .circle
{
   background-color: #000; 
}

悬停颜色变为

div.rating .circle:hover
{
   background-color: #ff0; 
}

在click事件中设置另一个类'selected'，以便当鼠标将颜色更改为#dedede;时

$( "div.rating .circle" ).click( function(){

   $( this ).toggleClass( "selected" );

} );

div.rating .circle.selected
{
   background-color: #dedede; 
}

定义selected类的悬停行为

div.rating .circle.selected:hover
{
   background-color: #dedede; 
}

Answer 3

我想在鼠标输入和鼠标离开时添加和删除一个类，并在点击时检查该类是一种方便的方法。

//add and remove a focus class with the same css values as the active class
$('.yourclass').on('mouseenter',function(){
    $('.yourclass').addClass('focussed');
}).on('mouseleave',function(){
    $('.yourclass').removeClass('focussed');
});

//check only for clicks on the focussed element and add the active class
$('.yourclass.focussed').on('click',function(){
    $(this).addClass('active');
});

Answer 4

您可以通过将.click()函数添加到jQuery中来执行此操作，如下所示：

请注意，所有这些都是示例代码

HTML

<div class="colors">
  <div class="red"></div>
  <div class="blue"></div>
  <div class="green"></div>
  <div class="yellow"></div>
  <div class="pink"></div>
</div>

CSS

.red {
  background-color:red;
}
.blue {
  background-color:blue;
}
.green {
  background-color:green;
}
.yellow {
  background-color:yellow;
}
.pink {
  background-color:pink;
}
div {
  height:40px;
  width:40px;
}
div.colors {
  width:200px;
  height:40px;
}

的jQuery **

$( "div" ).not('.colors')
.mouseenter(function() {
    //do something
   })
.mouseleave(function() {
    //do something
  })
.click(function() {
  var color = $(this).css('background-color');
  alert(color);
});

Jsfiddle example

希望这有帮助！

Answer 5

您可以使用jquerys .hover（）函数代替mousein mouseout。

<强> HTML

<div class="boxy">

</div>

<div class="selected">
  <h1>Selected Color From Click</h1>
</div>

<强> CSS

* {box-sizing: border-box;}
.boxy{
  border: 2px solid #000;
  width: 400px;
  height: 400px;
}
.selected{
  border: 2px solid #000;
}

<强> JS

var colors = ["#34f23a", "#f8f8f1", "#31b1cc"];
var changecolors;
var colorIndex = 0;

$('.boxy').hover(function(){
  shuffle = true;
  $(this).css('background', colors[colorIndex]);
  changecolors = setInterval(function(){
    if (colorIndex < (colors.length - 1)){
      colorIndex += 1;
    } else {
      colorIndex = 0;
    }
    $('.boxy').css('background', colors[colorIndex]);
  },500);

}, function(){
  window.clearInterval(changecolors);
  $('.boxy').css('background', 'transparent');
});

$('.boxy').click(function(){
   var selectedColor = $(this).css('background');
   $('.selected').css('background', selectedColor);
});

JSFiddle Example

Answer 6

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>js functions</title>
  <style>
    body { background-color:#101010; color: #aaa; text-align: center;}
    #holder{ width: 100%; height:100px; margin: 0 auto; display: inline-block;}
    #hover { position: relative; border: 1px dashed #333; width:100px; height:100px; display: inline-block;}
    #save  { border: 1px dashed #333; width:100px; height:100px; display: inline-block;}
  </style>
  <script>
    document.onreadystatechange = function()
    {
      
      var hover = document.getElementById("hover");
      var save  = document.getElementById("save");

      hover.onmouseover = function()
      {
        hover.style.background = "#f00";
      };

      hover.onmouseout = function()
      {
        hover.style.background = "#101010";
      };

      hover.onclick = function()
      {
        save.style.background = "#fff";
      };
    }
  </script>
</head>
<body>
  <div id="holder">
  <div id="hover">hover</div><div id="save">save</div>
   </div>
</body>
</html>

jQuery检测鼠标在mouseenter和mouseleave之间是否有鼠标点击

6 个答案:

请注意，所有这些都是示例代码

HTML

CSS

的jQuery **