Question

我有5个项目，上面有一个按钮，用于通知显示的项目数量。对于每个项目，我都有不同的背景图像。

问题在于，当一个人点击某个项目时，该项目将被删除，另一个项目将使用jQuery appended，并且当附加一个新项目时，它将转到该行的末尾，使其成为第5个元素，然后使用第5个项目的背景制作它，但有时候第5个项目是唯一可见的，它应该是第1个项目的背景。

这是一个JSFiddle： https://jsfiddle.net/wmerussi/csqge7jr/

一开始你有5个项目，请注意第5个项目是蓝色，现在如果你选择只显示1个项目，然后点击该项目将其删除，另一个项目将是蓝色（第5项的颜色）

是否可以仅定位可见项目？或者是否可以将可见的<li>重新排列到列表的开头？

HTML：

<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

jQuery的：

$('div').on('click', function() {
    var num = $(this).text();
    for(var i=0; i<5 ;i++) {
        if(i < num) {
            $('li').eq(i).fadeIn();
        } else {
            $('li').eq(i).fadeOut();
        }
    }
});

$(document).on('click', 'li', function() {
    $(this).fadeOut(function() {$(this).remove();});
    $(this).parent().append('<li></li>');
});

CSS：

div {
    display: inline-block;
    margin-right: 10px;
    width: 30px;
    height: 30px;
}

li:nth-child(1), .one {
    background-color: green;
}


li:nth-child(2), .two{
    background-color: orange;
}

li:nth-child(3), .three{
    background-color: red;
}

li:nth-child(4), .four{
    background-color: pink;
}

li:nth-child(5), .five{
    background-color: blue;
}

更新
如何重现问题
点击我的JSFiddle，然后选择只显示1个项目（顶部的绿色＆＃34; 1＆＃34;框）。之后，如果单击该可见项以删除它（使用jQuery），您将看到附加项将为蓝色，因为它们被附加到ul列表的末尾，使其成为第5个元素。但它是第一个可见的项目，所以它应该是绿色的。

Answer 1

我的解决方案是创建一个功能，管理根据项目的位置和可见性添加删除类，并在每次以某种方式更新项目的事件后调用该函数。这样，您可以将项目类管理与更新项目的代码分开

＆＃13;

$(function() {

  //the class management function
  function updateElemClasses() {
    //all color based classes the lists can have
    var classes = ['one', 'two', 'three', 'four', 'five'];

    //wait for fadeout to happen. Fadeout could take longer but this is just a proof of concept
    window.setTimeout(function() {
      $('li:visible').each(function(idx) {
        $(this).removeClass(classes.join(' ')).addClass(classes[idx]);
      })
    }, 500);

  }

  $('div').on('click', function() {
    var num = $(this).text();
    for (var i = 0; i < 5; i++) {
      if (i < num) {
        $('li').eq(i).fadeIn();
      } else {
        $('li').eq(i).fadeOut();
      }
    }
    updateElemClasses()
  });

  $(document).on('click', 'li', function() {
    $(this).fadeOut(function() {
      $(this).remove();
    });
    $(this).parent().append('<li>' + $(this).text() + '</li>');

    updateElemClasses()
  });

  updateElemClasses();
});

＆＃13;

/* you do not need nth-child now */

div {
  display: inline-block;
  margin-right: 10px;
  width: 30px;
  height: 30px;
}
.one {
  background-color: green;
}
.two {
  background-color: orange;
}
.three {
  background-color: red;
}
.four {
  background-color: pink;
}
.five {
  background-color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

＆＃13;

Answer 2

您可以在元素中添加或删除visible类。

然后，使用这些选择器而不是:nth-child：

.visible, .one {
    background-color: green;
}
.visible ~ .visible, .two {
    background-color: orange;
}
.visible ~ .visible ~ .visible, .three {
    background-color: red;
}
.visible ~ .visible ~ .visible ~ .visible, .four {
    background-color: pink;
}
.visible ~ .visible ~ .visible ~ .visible ~ .visible, .five {
    background-color: blue;
}

$('div').on('click', function() {
  var num = $(this).text();
  for (var i = 0; i < 5; i++) {
    if (i < num) {
      $('li').eq(i).addClass('visible').fadeIn();
    } else {
      $('li').eq(i).removeClass('visible').fadeOut();
    }
  }
});
$('li').addClass('visible');
$(document).on('click', 'li.visible', function() {
  $(this)
    .removeClass('visible')
    .fadeOut(function() {
      $(this).remove();
    })
    .parent().append('<li class="visible"></li>');
});

div {
  display: inline-block;
  margin-right: 10px;
  width: 30px;
  height: 30px;
}
.visible,
.one {
  background-color: green;
}
.visible ~ .visible,
.two {
  background-color: orange;
}
.visible ~ .visible ~ .visible,
.three {
  background-color: red;
}
.visible ~ .visible ~ .visible ~ .visible,
.four {
  background-color: pink;
}
.visible ~ .visible ~ .visible ~ .visible ~ .visible,
.five {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

如何仅使用nth-child定位可见对象？

2 个答案: