javascript - jQuery 检测鼠标是否在 mouseenter 和 mouseleave 之间单击

Question

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

1. 悬停时:

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

2. 点击:

   a. On click save color change and put value in another div
   

   现在我需要检查在 mouseleave 之前是否已单击其中一个 div，因为如果您选择了该 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 函数会被 mouse-leave 函数覆盖，因为 mouseleave 函数稍后会被调用。

在“#tijd”跨度中，我保存您单击的div的值，并且在悬停时，我需要每个小于或等于跨度的div更改为某种颜色，而所有大于该值的div是白色的，如果您不单击任何内容，则 div 应该使用仍在范围内的值再次着色。

(我尝试过检查保存点击值的 div 是否不为空，但它从来都不是)

$('.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)

})

.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;
}

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

Answer 1

我会用 CSS 和一个类来做到这一点:

1. 使用 CSS :hover 规则设置鼠标光标位于元素上方时的颜色
2. 单击时，在元素上设置一个类以指示它已被选中
3. 根据该类设置元素的样式

示例:

$(document.body).on("click", ".rating > .circle", function() {
  $(this).toggleClass("selected").siblings().removeClass("selected");
});

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

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