Question

我有一个动态创建的html像这样（简化）

<div class="timeslots-container">
  <div class="morning">
    <h1 class="lined-h">Morning</h1>
    <div class="row">
      <div class="timeslot" id="timeslot-0">10:30</div>
      <div class="timeslot" id="timeslot-1">11:00</div>
      <div class="timeslot" id="timeslot-2">11:30</div>
   </div>
  </div>
  <div class="day">
    <h1 class="lined-h">Day</h1>
    <div class="row">
      <div class="timeslot" id="timeslot-3">12:00</div>
      <div class="timeslot" id="timeslot-4">12:30</div>
      <div class="timeslot timeslot-disabled" id="timeslot-5">13:00</div>
      <div class="timeslot timeslot-disabled" id="timeslot-6">13:30</div>
      <div class="timeslot timeslot-disabled" id="timeslot-7">14:00</div>
      <div class="timeslot" id="timeslot-8">14:30</div>
      <div class="timeslot" id="timeslot-9">15:00</div>
      <div class="timeslot" id="timeslot-10">15:30</div>
      <div class="timeslot" id="timeslot-11">16:00</div>
      <div class="timeslot timeslot-disabled" id="timeslot-12">16:30</div>
      <div class="timeslot timeslot-disabled" id="timeslot-13">17:00</div>
      <div class="timeslot timeslot-disabled" id="timeslot-14">17:30</div>
    </div>
  </div>
</div>

这是一个表单，它有几个div按钮列表，其中一些有禁用类。当鼠标悬停在div上方时，我想突出显示一些按钮。要突出显示的div数从服务器传输。我可以这样做：

$(".timeslot").hover(function() {
  if(!$(this).hasClass('timeslot-disabled')) {
    $(this).nextUntil(".timeslot-disabled").slice(0,#{additional_slots}).addClass('timeslot-active');
    var count = $(this).siblings('.timeslot-active').length;
    $(this).prevUntil(".timeslot-disabled").slice(0,#{additional_slots}-count).addClass('timeslot-active');
  }
});
$(".timeslot").mouseleave(function() {
  $(this).siblings().removeClass('timeslot-active');
});

其中＃{additional_slots}是要突出显示的其他div的数量。

它可以工作，但只能在$（this）元素的父元素内。由于样式和定位问题，我需要使用不同的容器，但我想将所有容器中的时间段div作为一组突出显示。

我可以这样做吗

$timeslots = $('.timeslot);

然后在我的nextUntil和prevUntil中用$（this）遍历那个集合？也许还有另一个更正确的解决方案？

P.S。确切数量的元素和被禁用的是动态分配的东西，通过Ajax从服务器传输，我不能依赖它。

P上。 P. S.如果我设法解决这个问题，我还有另外一个问题：如何确定鼠标点击时突出显示的第一个时间段？我可以解析id的最小值，但我怀疑这是正确的做法。

Answer 1

我可以像$timeslots = $('.timeslot);一样，然后使用我的nextUntil和prevUntil从$（this）遍历该集合吗？

当然，您可以针对这种情况实施nextUntil和prevUntil：

var additional_slots = 1;

$(".timeslot").hover(function () {
  var $this = $(this);
  if (!$this.hasClass('timeslot-disabled')) {
    $this.addClass('timeslot-active');
    var $timeslots = $('.timeslot');
    var $nexts = nextUntil(".timeslot-disabled", $this, $timeslots).slice(0, additional_slots);
    $nexts.addClass('timeslot-active');
    var count = $nexts.length;
    var $prevs = prevUntil(".timeslot-disabled", $this, $timeslots).slice(0, additional_slots - count);
    $prevs.addClass('timeslot-active');
  }

  function nextUntil(selector, $this, $timeslots) {
    var index = $timeslots.index($this) + 1;
    var result = [];
    while (index < $timeslots.length && !$($timeslots[index]).hasClass('timeslot-disabled')) {
      result.push($timeslots[index]);
      index++;
    }
    return $(result);
  }

  function prevUntil(selector, $this, $timeslots) {
    var index = $timeslots.index($this) - 1;
    var result = [];
    while (index >= 0 && !$($timeslots[index]).hasClass('timeslot-disabled')) {
      result.push($timeslots[index]);
      index--;
    }
    return $(result);
  }
});

$(".timeslot").mouseleave(function () {
  $(".timeslot").removeClass('timeslot-active');
});

nextUntil＆amp;优先考虑一组合并的元素

1 个答案: