主页 / 问题 / 1133558
Accepted
FX_Sektor
Asked:2020-05-30 08:29:41 +0000 UTC2020-05-30 08:29:41 +0000 UTC

查找 jQuery 对象 $(this)

  • 772

$(document).ready(function() {
  $(".buddy").on("swiperight", function() {
    $(this).addClass('rotate-left').delay(700).fadeOut(1);
    lastChilde($(this))
  });

  $(".buddy").on("swipeleft", function() {
    $(this).addClass('rotate-right').delay(700).fadeOut(1);
    lastChilde($(this))
  });

  $("#nextSwipe").on("click", function() {
    let divBlock = $('.buddy').find('div#buddy.buddy').prevObject;
    divBlock.addClass('rotate-left').delay(700).fadeOut(1);
    lastChilde(divBlock.prevObject)
  });

});

function lastChilde(element) {
  if (element.is(':last-child')) {
    $('.buddy:nth-child(1)').removeClass('rotate-left rotate-right').fadeIn(300);
  } else {
    element.next().removeClass('rotate-left rotate-right').fadeIn(400);
  }
}
.rotate-left {
  transform: rotate(30deg) scale(0.8);
  transition: 1s;
  margin-left: 400px;
  cursor: e-resize;
  opacity: 0;
  z-index: 10;
}

.rotate-right {
  transform: rotate(-30deg) scale(0.8);
  transition: 1s;
  opacity: 0;
  margin-left: -400px;
  cursor: w-resize;
  z-index: 10;
}

.buddy {
  display: none;
  width: 400px;
  height: 400px;
  position: absolute;
  cursor: pointer;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.5.0-rc1/jquery.mobile-1.5.0-rc1.min.js"></script>
<div id="container" class="container-swipe">
  <div id="buddy" class="buddy" style="display: block;">
    <div style="width: 100px; height: 100px; background-color: blue;">
    </div>

  </div>
  <div class="buddy">
    <div style="width: 100px; height: 100px; background-color: red;">
    </div>
  </div>
</div>
<button style="margin-top: 150px" id="nextSwipe">Дальше</button>

有一个 swiperight 和 swipeleft 事件。编码

$(".buddy").on("swiperight", function () {
    console.log($(this));
    $(this).addClass('rotate-left').delay(700).fadeOut(1);
    lastChilde($(this))
});

$(".buddy").on("swipeleft", function () {
    $(this).addClass('rotate-right').delay(700).fadeOut(1);
    lastChilde($(this))
});

当我刷一张照片时它会起作用。它工作得很好，但我仍然有“下一步”按钮，它也应该像手指一样滑动，但有一个问题，我无法追踪在滑动事件期间找到的相同元素。$(this)毕竟，我$(this)将已经有一个按钮，而不是一张照片。

$("#nextSwipe").on("click", function () {
    let divBlock = $('.buddy')[0]; // не дает результата
    divBlock.addClass('rotate-left').delay(700).fadeOut(1);
    lastChilde(divBlock.prevObject)
});

 <div id="nextSwipe" class="show-more">Дальше</div>

let divBlock = $('.buddy')[0]并且$(this)在触发滑动的那一刻，它们给出了完全不同的对象并且代码不再适用并且滑动不起作用。

以防万一，我写了最后一个函数。如果所有块都结束了，她会从头开始滑动。

function lastChilde(element){
if (element.is(':last-child')) {
    $('.buddy:nth-child(1)').removeClass('rotate-left rotate-right').fadeIn(300);
} else {
    element.next().removeClass('rotate-left rotate-right').fadeIn(400);
}
}

html

 <div class="buddy" style="display: block;">
    <div>
      <img src="myimg/img1.png"/>
   </div>
 </div>
<div class="buddy">
    <div>
      <img src="myimg/img2.png"/>
   </div>
 </div>

该按钮应该与滑动相同。单击按钮以及使用鼠标事件滑动时，如何在 JS / Jquery 上找到完全相同的对象？

javascript

1 个回答

  1. Best Answer

    作为一个选项，通过单击按钮手动启动事件： $('.buddy').trigger('swiperight');

    • 0

相关问题