jQueryは、次の状態と前の状態でアクティブなクラスを追加して削除します

Question

私は現在、アクティブなクラスが追加された個々のアイコンをクリックすると8つのアイコンを持っています。ユーザーは、次のおよび前のボタンを使用して、次のクラスおよび前のクラスをトリガーすることもできます。

ユーザーがアイコンの1つを選択して次のまたは前のボタンを使用すると、その機能は現在選択されているアイコンがわからず、アイコンリストの最初からクリックします。

助けと助言が役に立ちます。

JS

$(".result-icons li").click(function() { 
    if (!$(this).hasClass("active")) { 
     $(".result-icons li.active").removeClass("active"); 
     $(this).addClass("active"); 
    } 
    }); 
    $('.result-icons button').click(function(e) { 
    e.stopPropagation(); 
    }); 
    var list = $(".result-icons ul"); 
    var li = list.children(); 
    var lengthMinusOne = li.length - 1; 
    var index = 0; 
    var num = $(".result-icons ul li").length; 
    var prevLi = $(li[0]); 
    $(".next").click(function() { 
    index++; 
    if (index > lengthMinusOne) index = 0; 
    prevLi.removeClass("active"); 
    prevLi = $(li[index]).addClass("active"); 
    }); 
    $(".previous").click(function() { 
    index--; 
    if (index < 0) index = lengthMinusOne; 
    prevLi.removeClass("active"); 
    prevLi = $(li[index]).addClass("active"); 
    }); 

HTML

<div class="row"> 
    <div class="column small-12 medium-12 large-12 text-center align-middle"> 
    <div class="result-icons"> 
    <ul> 
     <li> 
     <img src="images/results/icons/one.svg" alt=""/> 
     <p><strong>Title One</strong></p> 
     </li><li> 
     <img src="images/results/icons/two.svg" alt=""/> 
     <p><strong>Title Two</strong></p> 
     </li><li> 
     <img src="images/results/icons/three.svg" alt=""/> 
     <p><strong>Title Three</strong></p> 
     </li><li> 
     <img src="images/results/icons/four.svg" alt=""/> 
     <p><strong>Title Four</strong></p> 
     </li><li> 
     <img src="images/results/icons/five.svg" alt=""/> 
     <p><strong>Title Five</strong></p> 
     </li><li> 
     <img src="images/results/icons/six.svg" alt=""/> 
     <p><strong>Title Six</strong></p> 
     </li><li> 
     <img src="images/results/icons/seven.svg" alt=""/> 
     <p><strong>Title Seven</strong></p> 
     </li><li> 
     <img src="images/results/icons/eight.svg" alt=""/> 
     <p><strong>Title Eight</strong></p> 
     </li> 
    </ul> 
     <button href="" class="previous">Previous</button> <button href="" class="next">Next</button> 
    </div> 
    </div> 
</div> 

JSFiddle：

https://jsfiddle.net/1cr9fxyk/ 

Answer 1

$(".result-icons li").click(function() { 
 
    if (!$(this).hasClass("active")) { 
 
     $(".result-icons li.active").removeClass("active"); 
 
     $(this).addClass("active"); 
 
    } 
 
    }); 
 
    $('.result-icons button').click(function(e) { 
 
    e.stopPropagation(); 
 
    }); 
 
    var list = $(".result-icons ul"); 
 
    var li = list.children(); 
 
    var lengthMinusOne = li.length - 1; 
 
    var index = 0; 
 
    var num = $(".result-icons ul li").length; 
 
    var prevLi = $(li[0]); 
 
    $(".next").click(function() { 
 
    var active = $('ul li.active'); 
 
    
 
    if(active.is(':last-child')){ 
 
     $('ul li:first-child').addClass('active'); 
 
     active.removeClass('active') 
 
    } 
 
    
 
    active.next().addClass('active'); 
 
    active.removeClass('active') 
 
    }); 
 
    $(".previous").click(function() { 
 
    var active = $('ul li.active'); 
 
    
 
    if(active.is(':first-child')){ 
 
     $('ul li:last-child').addClass('active'); 
 
     active.removeClass('active') 
 
    } 
 
    
 
    active.prev().addClass('active'); 
 
    active.removeClass('active') 
 
    });

.active{color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="column small-12 medium-12 large-12 text-center align-middle"> 
 
    <div class="result-icons"> 
 
     <ul> 
 
     <li> 
 
      <img src="images/results/icons/one.svg" alt="" /> 
 
      <p><strong>Title One</strong> 
 
      </p> 
 
     </li> 
 
     <li> 
 
      <img src="images/results/icons/two.svg" alt="" /> 
 
      <p><strong>Title Two</strong> 
 
      </p> 
 
     </li> 
 
     <li> 
 
      <img src="images/results/icons/three.svg" alt="" /> 
 
      <p><strong>Title Three</strong> 
 
      </p> 
 
     </li> 
 
     <li> 
 
      <img src="images/results/icons/four.svg" alt="" /> 
 
      <p><strong>Title Four</strong> 
 
      </p> 
 
     </li> 
 
     <li> 
 
      <img src="images/results/icons/five.svg" alt="" /> 
 
      <p><strong>Title Five</strong> 
 
      </p> 
 
     </li> 
 
     <li> 
 
      <img src="images/results/icons/six.svg" alt="" /> 
 
      <p><strong>Title Six</strong> 
 
      </p> 
 
     </li> 
 
     <li> 
 
      <img src="images/results/icons/seven.svg" alt="" /> 
 
      <p><strong>Title Seven</strong> 
 
      </p> 
 
     </li> 
 
     <li> 
 
      <img src="images/results/icons/eight.svg" alt="" /> 
 
      <p><strong>Title Eight</strong> 
 
      </p> 
 
     </li> 
 
     </ul> 
 
     <button href="" class="previous">Previous</button> 
 
     <button href="" class="next">Next</button> 
 
    </div> 
 
    </div> 
 
</div>

1. アクティブクラスは
底部またはトップ