Question

我目前有八个图标，当用户点击个别图标时，会添加一个活动类。用户还可以使用下一个和上一个按钮来触发下一个和上一个类。

问题是，当用户选择其中一个图标然后使用下一个或上一个按钮时，该功能不知道哪个是当前选择的图标，然后从图标列表的开头点击。

任何帮助/建议都会有所帮助。

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

firebase.auth().signInWithPopup(provider).then(function(result) {
  // This gives you a Google Access Token. You can use it to access the Google API.
  var token = result.credential.accessToken;
  // The signed-in user info.
  var user = result.user;
  // ...
}).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // The email of the user's account used.
  var email = error.email;
  // The firebase.auth.AuthCredential type that was used.
  var credential = error.credential;
  // ...
});

$(".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}

选择有效的li并使用<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>或.next()根据点击按钮添加课程
当活动课程为最后一个或首次从底部或顶部开始时添加

jQuery在下一个和以前的状态上添加和删除活动类

1 个答案: