ifステートメントでボタンを無効にした後でボタンを再度有効にする

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

のために働くことを願っています変更しました。どのように要素の配列を扱うオブジェクトを作成するのですか？そうすれば、あなたはそれに委任することができます。

// 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; 
    }; 
} 

ご覧のとおり、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です。