javascript - jQuery 函数不会在第一次单击时触发

Question

我有一个用 jQuery 编写的函数。它工作正常。唯一的问题是该功能不会在第一次点击时触发。任何解决方案或想法？

$(document).ready(function() {
  $('.swipe-prev').on('click', function() {


    var prevImg = $('img.active').prev('.result-image-act img');
    if (prevImg.length == 0) {
      prevImg = $('.result-image-act img:last');
    }
    $('img.active').removeClass('active');
    prevImg.addClass('active');
  });

  $('.swipe-next').on('click', function() {
    var nextImg = $('img.active').next('.result-image-act img');
    if (nextImg.length == 0) {
      nextImg = $('.result-image-act img:first');
    }
    $('img.active').removeClass('active');
    nextImg.addClass('active');
  });
});

.result-row {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  display: -moz-inline-stack;
  display: inline-block;
  -webkit-box-shadow: 0 0 7px 0 #ddd;
  -moz-box-shadow: 0 0 7px 0 #ddd;
  box-shadow: 0 0 7px 0 #ddd;
  border: 1px solid #ccc;
  height: 290px;
  line-height: 1.3em;
  max-width: 300px;
  max-height: 290px;
  margin: 4px 0 12px 8px;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 300px;
  white-space: normal;
  vertical-align: top;
}

.result-image-act {
  -webkit-border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
  background-color: transparent;
  display: block;
  height: 225px;
  position: relative;
  width: 300px;
}

.result-image-act img {
  display: none;
}

.result-image-act .active {
  display: block;
  height: 225px;
  position: relative;
  width: 300px;
}

.embed-result-price {
  -webkit-border-radius: 5px 0 5px 0;
  -moz-border-radius: 5px 0 5px 0;
  border-radius: 5px 0 5px 0;
  background-color: #FFF;
  border: 1px solid #ccc;
  border-left: none;
  border-top: none;
  color: #111;
  display: block;
  left: 0;
  padding: 2px 5px;
  position: absolute;
  top: 0;
}


/* swipe styling */

.swipe-wrap-lef {
  width: 30px;
  height: 60px;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  position: absolute;
  top: 87px;
  left: 0px;
  float: left;
}

.swipe-wrap-rig {
  width: 30px;
  height: 60px;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  position: absolute;
  top: 87px;
  right: 0px;
  float: right;
}

.swipe-wrap-next {}

.swipe-wrap a {
  text-decoration: none;
}

.swipe-prev {
  display: table;
  background: #fff;
  opacity: 0.8;
  width: 30px;
  height: 60px;
  /* as the half of the width */
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border: 1px solid #fff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.swipe-next {
  display: table;
  background: #fff;
  opacity: 0.8;
  width: 30px;
  height: 60px;
  /* as the half of the width */
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  border: 1px solid #fff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.swipe-prev:hover,
.swipe-next:hover {
  background: #fff;
  opacity: 1;
}

.swipe-prev p,
.swipe-next p {
  font-size: 30px;
  color: grey;
  text-align: center;
  line-height: 60px;
  margin: 0px;
  padding: 0px;
  display: table-cell;
  vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="result-row">
  <!-- image box -->

  <a href="#">
    <div class="result-image-act">
      <img src="1.jpg" alt="image 1" class="active">
      <img src="2.jpg" alt="image 2">
      <img src="3.jpg" alt="image 3">
      <img src="4.jpg" alt="image 4">
      <img src="5.jpg" alt="image 5">
      <img src="6.jpg" alt="image 6">
      <img src="7.jpg" alt="image 7">
      <img src="8.jpg" alt="image 8">
      <img src="9.jpg" alt="image 9">
      <img src="10.jpg" alt="image 10">
    </div>
    <span class="embed-result-price">36.0</span>
    <div class="swipe-wrap">
      <div class="swipe-wrap-lef">
        <a href="#">
          <div class="swipe-prev">
            <p>&lt;</p>
          </div>
        </a>
      </div>
      <div class="swipe-wrap-rig">
        <a href="#">
          <div class="swipe-next">
            <p>&gt;</p>
          </div>
        </a>
      </div>
    </div>
  </a>

  <p class="result-info">
    <span style="color:#ccc" title=""> &#9734; </span>
    <time class="result-date" datetime="2018-03-05 8:36" title="Mon 05 
        Mar 08:36:12 PM"> Mar 5</time>
    <a href="#" data-id="" class="result-title"> T shirt </a>
    <span class="result-price">36.0</span>
    <span class="post-hide"><i class="fa fa-trash trash-can" aria-
        hidden="true"></i> </span>
  </p>
</li>

Answer 1

尝试使用

$('.swipe-prev').click(function(){});