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

Question

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

＆＃13;

＆＃13;

$(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');
  });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试使用

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

Answer 2

您需要将z-index: 20;添加到swipe-next和swipe-prev

因为如果你检查你的html，你可以看到图像是＆＃34; ontop＆＃34; < >

的容器

<强>演示

＆＃13;

＆＃13;

$(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');
  });
});

＆＃13;

.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;
  z-index: 20;
}

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

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

＆＃13;

<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="https://hunyadi.info.hu/levente/images/stories/boxplus/image3.jpg" alt="1" class="active">
      <img src="2.jpg" alt="2">
      <img src="https://hunyadi.info.hu/levente/images/stories/boxplus/image3.jpg" alt="3">
      <img src="4.jpg" alt="4">
      <img src="https://hunyadi.info.hu/levente/images/stories/boxplus/image3.jpg" alt="5">
      <img src="6.jpg" alt="6">
      <img src="https://hunyadi.info.hu/levente/images/stories/boxplus/image3.jpg" alt="7">
      <img src="8.jpg" alt="8">
      <img src="https://hunyadi.info.hu/levente/images/stories/boxplus/image3.jpg" alt="9">
      <img src="10.jpg" alt="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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

少数事情：

首先请删除＆＃34; $（文档）.ready（function（）{}＆＃34;因为您的事件正在进行点击，因此无需在那里添加OnReady函数。

其次，我尝试了你的代码，它的工作非常完美，唯一的问题可能是图像渲染，它可能需要一些时间来渲染这就是为什么你假设它不是第一次工作。< / p>

尝试在控制台中为每次点击打印一些内容，然后您就会知道它是否有效。就像我一样：

$(document).ready(function() {
    $('.swipe-prev').on('click', function() {
        console.log("Prev");    // Print "Prev" on click swipe-prev
        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() {
        console.log("Next");  // Print "Next" on click swipe-next
        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');
    });
});

感谢。

Answer 4

正如我在评论中告诉你的那样，你希望在单击事件发生时触发此函数，并且你要告诉jQuery eventlistener监视文档就绪（事件就绪只发生一次，当文档完全加载时）。 无论如何它仍在工作，但在第一次点击时，文档可能根本没有为您加载，可能是图像上的延迟加载等。 只需删除此事件侦听器即可触发您的函数，无需连接两个事件侦听器，因为您只需要一个。

想想，例如，我的网络连接速度慢，当文档仍在加载时我看到第一张图片，为什么我不能点击查看下一张图片？我要等到文档加载才能看到下一个？

没有任何意义。

它按原样对我工作：

  $('.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>