在if語句中禁用按鈕后重新啟用它

Question

如果我想提供一些幫助，我寫得有些拙劣。

我正在嘗試使用左右箭頭按鈕在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'));

為了避免代碼重復，我使用了一些技巧（即使用變量綁定和訪問對象的屬性），希望它不會使代碼復雜化。 如您所見，當您位於最后一個/第一個元素中時，必須禁用/啟用按鈕（我認為這是您的代碼中有誤的位）。 希望能幫助到你。

這里的小提琴 。