当列表到达结尾或开头时，如何从幻灯片中删除箭头

Question

我的页面上有幻灯片。有五个项目。我有两个箭头循环穿过这些项目。当页面加载时，我使用 css 隐藏左箭头，当幻灯片播放结束时，我想隐藏右箭头。我试图做一些技巧，比如检测父母“margin-left：0”来从页面中删除左箭头，但到目前为止我还没有成功。我也根本无法删除右箭头。下面是我的代码。我知道有更简单的方法可以做到这一点，但我对这类问题没有经验。

<div id="tips-navbar">
    <ul class="slides">
      <li id="the-best-mashed-potatoes" class="selected">
        <div class="st-label">The Best Mashed Potatoes</div>
        <div class="underline"></div>
      </li>
      <li id="fully-loaded-mashed-potatoes">
        <div class="st-label">Fully Loaded Mashed Potatoes</div>
        <div class="underline"></div>
      </li>
      <li id="perfect-mashed-sweet-potatoes">
        <div class="st-label">Perfect Mashed Sweet Potatoes</div>
        <div class="underline"></div>
      </li>
      <li id="how-to-make-mash-tinis">
        <div class="st-label">How to Make Mash-tinis</div>
        <div class="underline"></div>
      </li>
      <li id="simple-smashed-potatoes">
        <div class="st-label">Simple Smashed Potatoes</div>
        <div class="underline"></div>
      </li>            
    </ul>
        <a class="st-brownBg st-left-m">
            <div class="st-arrowVideoBack"></div>
        </a>

        <a class="st-brownBg  st-right-m">
            <div class="st-arrowVideoNext"></div>
        </a>
  </div>

    $(function vNext(){
        $( ".st-right-m" ).click(function() {
            $( "#tips-navbar ul" ).animate({
                marginLeft: "-=431"
            }, 500);
            $( ".st-left-m" ).css('display','block');
            if($('.st-right-m'.click() >= 4)){
                $('.st-right-m').hide()
            }
        });
    });

    $(function vPrev(){
        $( ".st-left-m" ).click(function() {
            $( "#tips-navbar ul" ).animate({
                marginLeft: "+=431"
            }, 500);
            if($($this).parents('.slides').css('marginLeft' === 0 + 'px')){
                $(this).hide();
            }
        });

    });

沙盒：http://jsfiddle.net/eapo/oq46u3wf/1/

Answer 1

您可以使用您的 JS 代码执行以下操作：

$.current = 1;

$.updateArrows = function () {
    if ($.current <= 1) {
        if ($( ".st-left-m" ).is(':visible')) {
            $( ".st-left-m" ).hide();
        }
    } else {
        $( ".st-left-m" ).show();
    }
    if ($.current >= 5) {
        if ($( ".st-right-m" ).is(':visible')) {
            $( ".st-right-m" ).hide();
        }
    } else {
        $( ".st-right-m" ).show();
    }
};

$(function vNext(){
    $( ".st-right-m" ).click(function() {
        $( "#tips-navbar ul" ).animate({
            marginLeft: "-=431"
        }, 500);
        $.current++;
        $.updateArrows();
    });
});

$(function vPrev(){
    $( ".st-left-m" ).click(function() {
        $( "#tips-navbar ul" ).animate({
            marginLeft: "+=431"
        }, 500);
        $.current--;
        $.updateArrows();
    });
});

我们在这里实际做的是：

1. 在当前幻灯片中保留一个 var，每次点击都会更新。
2. 此外，每次单击时，我们都会更新检查当前幻灯片的箭头（具有额外功能），如果为 1，则隐藏左箭头，如果为 5，则隐藏右箭头。

Answer 2

您可以使用 jQuery 找到“最后一个孩子”，在您的情况下是最后一个

，然后对其进行操作。请参阅此参考：http://api.jquery.com/last-child-selector/

//以你为例

$(".slides li").is(':last-child')