Question

我正在使用此vTicker script。它使用li滚动项目，还有Previous和Next按钮。我想修改jQuery来说明是否只有一个li不滚动并隐藏按钮。

<div id="scroller">
    <ul id="list">
        <li>Test 1</li>
        <li>Test 2</li>
        <li>Test 3</li>
        <li>Test 4</li>
        <li>Test 5</li>
    </ul>
</div>
<a class="Prev" href="#">Prev</a>
<a class="Next" href="#">Next</a>

Jquery的：

$(function(){
    var $scroller = $("#jqscroller");
    $scroller.vTicker('init', {height: 20, showItems: 1});

    $(".next").click(function(){ 
        $scroller.vTicker('next');
    });

    $(".prev, .next").hover(function(){ 
        $scroller.vTicker('pause', true);
    }, function(){
        $scroller.vTicker('pause', false);
    });

    $(".prev").click(function(){ 
        $scroller.vTicker('prev');
    });
});

那么有一种方法只能在li大于1的情况下调用该函数并向按钮添加一个css类，以便我可以display:none吗？

Answer 1

$(function(){
    var $scroller = $("#jqscroller");

    if ( $('#list li').length > 1 ) {
         $scroller.vTicker('init', {height: 20, showItems: 1});
    } else {
      $('.Prev, .Next').hide();
    }

    $(".Next").click(function(){ 
        $scroller.vTicker('next');
    });

    $(".Prev, .Next").hover(function(){ 
        $scroller.vTicker('pause', true);
    }, function(){
        $scroller.vTicker('pause', false);
    });

    $(".Prev").click(function(){ 
        $scroller.vTicker('prev');
    });
});

Answer 2

你可以这样做：

if ($('#list li').length === 1) {
   $('.Prev, .Next').hide();
}

Answer 3

试试这个：

if ($("#list li").length > 1) {
    $scroller.vTicker('init', {height: 20, showItems: 1});
}
else {
    $(".Prev, .Next").hide();
}

删除函数，如果不大于1

3 个答案: