Question

我在滑块中有一个图像列表，如下所示：

<ul>
    <li class="dd">one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
</ul>

有一个按钮可以删除带有＆＃34; dd＆＃34;类的<li>，所以我继续执行此功能：

function delete(){
    $('li.dd').remove();
}

所以现在删除了特定<li>，我想要课程＆＃34; dd＆＃34;要添加到我当前所在的<li>。我尝试添加这个：

function delete(){
    $('li.dd').remove();
    $('li').addClass(' dd')
}

但正如您所看到的，它所做的只是将类添加到所有现有的<li>，这意味着如果我再次单击删除按钮，则会删除整个列表。

我正准备着我的笔：

http://codepen.io/anon/pen/gpNwGp

提前谢谢！

Answer 1

由于您要为所有元素添加类，因此下次单击时将删除所有li。您可以使用以下方法将该类仅添加到第一个 li。

您可以使用:first伪选择器来选择第一个元素。

function delete() {
    $('li.dd').remove();
    $('li:first').addClass('dd');
    //   ^^^^^^
}

您还可以使用first()获取第一个元素

function delete() {
    $('li.dd').remove();
    $('li').first().addClass('dd');
    //     ^^^^^^^^
}

您可以查看更新的代码集Demo。

Answer 2

首先保存下一个元素以添加类：

function delete(which) {
    var next_li = $('li.dd').next();
    $('li.dd').remove();
    next_li.addClass("dd");
}

我认为这可能会对你有所帮助。
祝你好运。

记得！不要使用.first()，因为它会提供第一个li dd类。不是排队的。

Answer 3

您可以使用jQuery方法使其更清晰

＆＃13;

function toggleSlide(direction) {
  var $visible = $('.slider > li:visible').hide();
  var $ft = $visible[direction ? 'next' : 'prev']();
  if (!$ft.length) {
    $ft = $('.slider > li')[direction ? 'first' : 'last']();
  }
  $ft.show();
  setIndex();
}

function getVisible() {
  return $('.slider > li:visible').index() + 1;
}

function goToEdge(where) {
  $('.slider > li:visible').hide();
  $('.slider > li')[where ? 'last' : 'first']().show();
  setIndex();
}

function addSlide() {
  $('ul.slider').append('<li class="hideable"><img src="http://placehold.it/700x100" alt="Sunset" /></li>');
}

function deleteSlide() {
  var $visible = $('.slider > li:visible');
  toggleSlide(true);
  $visible.remove();
}

function setIndex() {
  $('#slideNumber').text(getVisible())
}

setIndex();

＆＃13;

.hideable {
  display: none;
}
img {
  width: 640px;
  height: 480px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="slider" style="list-style-type:none; margin-left:-2em;">
  <li class="hideable dd" style="display: block;">
    <img src="http://placehold.it/100x100" alt="hinterground" />
  </li>
  <li class="hideable">
    <img src="http://placehold.it/200x100" alt="Berries" />
  </li>
  <li class="hideable">
    <img src="http://placehold.it/300x100" alt="Cheetah" />
  </li>
  <li class="hideable">
    <img src="http://placehold.it/400x100" alt="Fence" />
  </li>
  <li class="hideable">
    <img src="http://placehold.it/500x100" alt="Paper" />
  </li>
  <li class="hideable">
    <img src="http://placehold.it/600x100" alt="Sunset" />
  </li>
  <!-- ... and so on -->
</ul>
<!-- Buttons to go back and forth between slides. -->
<form>
  <input type="button" id="firstButton" value="First" onclick="goToEdge(false)" />
  <input type="button" value="Back" onclick="toggleSlide(false)" />
  <input type="button" value="Forward" onclick="toggleSlide(true)" />
  <input type="button" id="lastButton" value="Last" onclick="goToEdge(true)" />
  <input type="button" value="Add Slide" onclick="addSlide()" />
  <input type="button" value="Delete Slide" onclick="deleteSlide()" />
  <p>Slide
    <!-- you can change "Slide" to Page, Item, etc. --> <span id="slideNumber">
        </span>

  </p>
</form>

＆＃13;

简单：使用classname删除<li>，然后将此类名添加到next（或current）</li> <li>

3 个答案: