Question

我有一些写得不好的if语句我想要一些帮助。

我试图使用左右箭头按钮循环显示div。

当我使用右箭头并到达最后一个div（使用类选择器“pars”调用）时，我禁用右箭头以显示没有更多内容。同样，当使用左箭头并且到达第一个div时，我禁用左箭头。

当第一个和最后一个div分别不可见时，如何调整代码以允许重新启用按钮？

HTML

<div class="pars active cont-3"><p>Content-1</p></div>
<div class="pars cont-3"><p>Content-2</p></div>
<div class="pars cont-3">Content-3</p></div>
<div id="btn-cycle"> 
<button id="cycle-back"><i class="fa fa-lg fa-3x fa-angle-left</i></button>
<button id="cycle-forward"><i class="fa fa-lg fa-3x fa-angle-right"></i></button>
</div>

CSS

.pars.active {
display: block;
}

#btn-cycle {
    background-color:#ffffff;
    float:right;
    width:25%;
    color:#565655;
    padding:0.5em;
}

.cont-3 {
    padding:1em;
    color:#ffffff;
    background-color:#3a3a3a;
    font-size:0.7em;
    line-height:1.35em;
    font-family:"raleway", sans-serif;
    margin:0;
    display: none;
}

JAVASCRIPT

var $pars = $('.pars');
var $fwdBtn = document.getElementById('cycle-forward');
var $backBtn = document.getElementById('cycle-back');

$('#cycle-forward').click(function() {
    var $next = $pars.filter('.active').removeClass('active').next('.pars');
    if (!$next.length) $next = $pars.first();
    $next.addClass('active');
    if ($pars.last().is(':visible')) {
        $fwdBtn.disabled = true;
    } else {
        $fwdBtn.disabled = false;
    }
});

$('#cycle-back').click(function() {
    var $prev = $pars.filter('.active').removeClass('active').prev('.pars');
    if (!$prev.length) $prev = $pars.last();
    $prev.addClass('active');
    if ($pars.first().is(':visible')) {
        $backBtn.disabled = true;
    } else {
        $backBtn.disabled = false;
    }
});

非常感谢任何帮助，

干杯！

Answer 1

看起来你可以使用我添加到两个函数中的最后一个if语句。

var $pars = $('.pars');
var $fwdBtn = document.getElementById('cycle-forward');
var $backBtn = document.getElementById('cycle-back');

$('#cycle-forward').click(function() {
    var $next = $pars.filter('.active').removeClass('active').next('.pars');
    if (!$next.length) $next = $pars.first();
    $next.addClass('active');
    if ($pars.last().is(':visible')) {
        $fwdBtn.disabled = true;
    } else {
        $fwdBtn.disabled = false;
    }
    if (!$pars.first().is(':visible')) {
        $backBtn.disabled = false;
    }

});

$('#cycle-back').click(function() {
    var $prev = $pars.filter('.active').removeClass('active').prev('.pars');
    if (!$prev.length) $prev = $pars.last();
    $prev.addClass('active');
    if ($pars.first().is(':visible')) {
        $backBtn.disabled = true;
    } else {
        $backBtn.disabled = false;
    }
    if (!$pars.last().is(':visible')) {
        $fwdBtn.disabled = false;
    }
});

Answer 2

我修改了你的JS希望它可以为你工作

var $pars = $('.pars');
        var $fwdBtn = document.getElementById('cycle-forward');
        var $backBtn = document.getElementById('cycle-back');

        $('#cycle-forward').click(function () {
            var $next = $pars.filter('.active').removeClass('active').next('.pars');
            if (!$next.length) $next = $pars.first();
            $next.addClass('active');
            if ($pars.last().is(':visible')) {
                $fwdBtn.disabled = true;
            } else {
                $fwdBtn.disabled = false;
                $backBtn.disabled = false;
            }
            return false;
        });

        $('#cycle-back').click(function () {
            var $prev = $pars.filter('.active').removeClass('active').prev('.pars');
            if (!$prev.length)
                $prev = $pars.last();
            $prev.addClass('active');
            if ($pars.first().is(':visible')) {
                $backBtn.disabled = true;
            } else {
                $backBtn.disabled = false;
                $fwdBtn.disabled = false;
            }
            return false;
        });

Answer 3

我认为这个问题可以通过更加面向对象的方式解决。如何创建一个处理元素数组的对象？这样你就可以将那些东西委托给它，避免一些if-elses。

// Constructor function in order to create objects that deal with collections of elements. Implements some simple collection's methods.
function ElementManager(elArray) {
    var size = elArray.length,
        currentIdx = 0;

    this.getCurrent = function() {
        return elArray[currentIdx];
    };

    this.next = function() {
        currentIdx = currentIdx < size - 1 ? (currentIdx + 1) : 0;
        return this;
    };

    this.previous = function() {
        currentIdx = currentIdx === 0 ? (size - 1) : (currentIdx - 1);
        return this;
    };

    this.first = function() {
        currentIdx = 0;
        return this;
    };

    this.last = function() {
        currentIdx = size - 1;
        return this;
    };

    this.isLast = function() {
        return currentIdx === size - 1;
    };

    this.isFirst = function() {
        return currentIdx === 0;
    };
}

正如您所看到的，它是Collection的接口的一个非常简单的实现，可以在许多语言中找到，例如Java或C ++。

然后，你的代码：

var elementManager = new ElementManager($('.pars')),
    $fwdBtn = $('#cycle-forward'),
    $backBtn = $('#cycle-back');

function moving(direction) {
    var $currentElement = $(elementManager.getCurrent()),
        $nextElement = $(elementManager[direction]().getCurrent());

    $currentElement.removeClass('active');// Remove active class of current element
    $nextElement.addClass('active');// Activate next element.
    $fwdBtn.prop('disabled', elementManager.isLast());// If it's last element, disable button, else activate it.
    $backBtn.prop('disabled', elementManager.isFirst());// If it's first element, disable button, else activate it.
}

// Add events.  
$fwdBtn.click(moving.bind(null, 'next'));
$backBtn.click(moving.bind(null, 'previous'));

为了避免代码重复，我使用了一些技巧（即使用变量绑定和访问对象的属性），希望它不会使代码复杂化太多。如您所见，当您处于最后/第一个元素时，您必须禁用/启用按钮（我认为这是您的代码中的错误）。希望它有所帮助。

这里是fiddle。

在if语句中禁用按钮后重新启用按钮

3 个答案: