Question

我有一个列表项，第一个已经有.active类。

当我点击其他列表项时，.active类将移动到该被点击的元素。

但问题是，我无法检测我在前一个.active元素之前或之后点击的项目。

这是脚本

＆＃13;

$(document).ready(function(){
  var $li = $("li");

  $li.each(function(){
    $(this).click(function(){
      $li.removeClass("active");
      $(this).addClass("active");
      
      if($("li.active").next($(this))){
      		$("span").text("after clicked element");
      } else {
      		$("span").text("before clicked element");
      }
    })
  })
})

＆＃13;

li.active {
  background:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="active">Check 1</li>
  <li>Check 2</li>
  <li>Check 3</li>
  <li>Check 4</li>
</ul>

<span></span>

＆＃13;

这里是fiddle

Answer 1

要实现此目的，您可以查看index()声明中相关元素的if。另请注意，each()语句是多余的。试试这个：

$(document).ready(function() {
  $("li").click(function() {
    var activeIndex = $('li.active').removeClass('active').index();
    var thisIndex = $(this).addClass('active').index();

    if (activeIndex < thisIndex) {
      $("span").text("after active element");
    } else if (activeIndex > thisIndex) {
      $("span").text("before active element");
    } else {
      $('span').text('same element');
    }
  })
})

li.active {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="active">Check 1</li>
  <li>Check 2</li>
  <li>Check 3</li>
  <li>Check 4</li>
</ul>

<span></span>

Answer 2

如果能够正确理解这将解决问题，您可以尝试使用索引： -

＆＃13;

$(document).ready(function() {
  var $li = $("li");
  $li.each(function() {
    $(this).click(function() {
      if ($("li.active").index()<$(this).index()) {
        $("span").text("after clicked element");
      } else {
        $("span").text("before clicked element");
      }
      $li.removeClass("active");
      $(this).addClass("active");
    })
  })
})

＆＃13;

li.active {
  background: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="active">Check 1</li>
  <li>Check 2</li>
  <li>Check 3</li>
  <li>Check 4</li>
</ul>
<span></span>

＆＃13;

Answer 3

您可以保存最近点击的元素的index，并将其与之前的元素进行比较。

＆＃13;

$(document).ready(function(){
  var index = 0;
    $('li').click(function(){
      $('li').removeClass("active");
      $(this).addClass("active"); 
      var res = $("li.active").index() > index ? 'after' : $("li.active").index() == index ? 'same' : 'before';
      index = $(this).index();
      console.log(res);
    })
  })

＆＃13;

li.active {
  background:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="active">Check 1</li>
  <li>Check 2</li>
  <li>Check 3</li>
  <li>Check 4</li>
</ul>

<span></span>

＆＃13;

如何检查被点击的元素是在当前活动元素之前还是之后

3 个答案: