Question

我试图减少使用html，css和jquery制作的评级组件的代码。我已经设法减少了很多，但有一件我不能通用。

您在此处看到我希望能够多次使用的HTML

<div class="col-control description">
 <fieldset class="rating-fieldset">
  <legend class="sr-only">Rating</legend>
   <div class="rating-container">
    <div class="rating">
     <span class="hover-score-label hide" dir="ltr"></span>
     <span class="click-score hide" dir="ltr"></span>
     <div>
      <input type="checkbox" id="star5" name="rating" value="5"><label for="star5" class="star5" title="5"><span>★</span></label>
      <input type="checkbox" id="star4" name="rating" value="4"><label for="star4" class="star4" title="4"><span>★</span></label>
      <input type="checkbox" id="star3" name="rating" value="3"><label for="star3" class="star3" title="3"><span>★</span></label>
      <input type="checkbox" id="star2" name="rating" value="2"><label for="star2" class="star2" title="2"><span>★</span></label>
      <input type="checkbox" id="star1" name="rating" value="1"><label for="star1" class="star1" title="1"><span>★</span></label>
     </div>
    </div>
   </div>
  </fieldset>
 </div>

您在这里看到我想要优化的jQuery。

$('.rating label').hover(function () {
    $(this).parents('div.rating').find('.hover-score-label').removeClass("hide");

    if (!$(this).parents('div.rating').find('.hover-score-label').hasClass("hide")) {
        $(".click-score").addClass("hide");
    }
    else {
        $(".click-score").removeClass("hide");
    }

}, function () {
    $(".click-score.scored").removeClass("hide")
    $(".hover-score-label").addClass("hide");
});

$(".rating label").eq(0).hover(function () {
    $(this).parents('div.rating').find('.hover-score-label').text("5")
});


$(".rating label").eq(1).hover(function () {
    $(this).parents('div.rating').find('.hover-score-label').text("4")
});

$(".rating label").eq(2).hover(function () {
    $(this).parents('div.rating').find('.hover-score-label').text("3")
});


$(".rating label").eq(3).hover(function () {
    $(this).parents('div.rating').find('.hover-score-label').text("2")
});

$(".rating label").eq(4).hover(function () {
    $(this).parents('div.rating').find('.hover-score-label').text("1")
});

我希望它可以与eq（）一起工作，但它没有...当我在页面上使用完全相同的html评级（参见HTML部分）两次时，“.rating label”不是eq（ 0）直到eq（4）但是eq（5）直到eq（9）。

我注意到我很难准确解释我想要的东西。我希望你能清楚地了解它。

提前致谢

Answer 1

你的hover逻辑的第一部分有点奇怪，你首先删除hide类，然后检查它是否在元素上没有重新添加之前。。？我认为这是尝试切换课程，因此您只能使用toggleClass()而没有if条件。总而言之，使用hide类是有点多余的。只需根据需要使用hide()或show()。

其次，在这种情况下，closest()比使用parents()更受欢迎，因为它在找到第一个匹配时停止遍历DOM。

您还可以将两个悬停事件合并为一个，因为它们位于同一个元素上。您不需要每个元素的处理程序。我必须将hover-score-label元素移动到星空下，否则元素的显示/隐藏会干扰悬停事件。

如果您希望标签显示复选框值的说明，您可以将其放在title属性中并将其读回。试试这个：

＆＃13;

$('.rating label').hover(function() {
  $(this).closest('div.rating').find('.hover-score-label').show().text($(this).prop('title'));
}, function() {
  $(".click-score.scored").show();
  $(".hover-score-label").hide();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-control description">
  <fieldset class="rating-fieldset">
    <legend class="sr-only">Rating</legend>
    <div class="rating-container">
      <div class="rating">
        <span class="click-score hide" dir="ltr"></span>
        <div>
          <label title="Worst">
            <input type="checkbox" id="star1" name="rating" value="1">
            <span>★</span>
          </label>
          <label title="Bad">
            <input type="checkbox" id="star2" name="rating" value="2">
            <span>★</span>
          </label>
          <label title="Average">
            <input type="checkbox" id="star3" name="rating" value="3">
            <span>★</span>
          </label>
          <label title="Good">
            <input type="checkbox" id="star4" name="rating" value="4">
            <span>★</span>
          </label>
          <label title="Best">
            <input type="checkbox" id="star5" name="rating" value="5">
            <span>★</span>
          </label>
        </div>
        <span class="hover-score-label hide" dir="ltr"></span>
      </div>
    </div>
  </fieldset>
</div>

＆＃13;

需要一些关于jQuery代码优化的技巧

1 个答案: