javascript - 使用 jquery 中的每个循环的 Next 和 Prev 按钮功能

Question

我的 div cl-content 中有多个项目。我在列表的每个项目中添加了上一个和下一个按钮。现在，当我单击这些按钮时，我尝试显示下一个和上一个 .cl-item，但我不知道如何使用 jQuery 编写此功能。

这是我的 HTML：

<div class="cl-content">                                                    
  <div class="cl-item" itemscope="" itemtype="http://schema.org/Corporation" style="cursor: pointer;">
    <div class="cl-item-illust">my Illustration</div>
    <div class="cl-item-photo">
      <img data-src="https://ready.cms-cxpm.com/var/comexposium/storage/images/media/ready-for-it-medias/icons/men/8838685-1-fre-FR/Men_contact_photo_list_ready_for_it_fre.jpg" src="https://ready.cms-cxpm.com/var/comexposium/storage/images/media/ready-for-it-medias/icons/men/8838685-1-fre-FR/Men_contact_photo_list_ready_for_it_fre.jpg" alt="Ready for IT" width="" height="" data-loaded="true">
    </div>
    <div class="cl-item-content">
      <h3 class="cl-item-title" itemprop="name">John Doe</h3>
      <p class="cl-item-subtitle">Responsable Stratégie Achat Logiciels, EDF</p>
      <div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
        <p class="cl-item-address">My Adress</p>
      </div>
    </div>
  </div>                                                  
</div>

这是我的js代码：

$(document).ready(function(){
  if (window.location.href.indexOf("Comite-Editorial") > -1) {
    let person = $(".cl-item")
    let m
    person.each(function(){
      $(this).css('cursor', 'pointer')
      $(this).click(function(){
        m = $.trim($(this).find('h3').text())
        l = $.trim($(this).find('p').text())
        v = $.trim($(this).find('img').attr('src'))
        let n = noty({
          theme: 'relax',
          closeWith: ['backdrop' , 'button'],
          modal: true,
          dismissQueue: false,
          layout: 'center',
          text: '<img src='+ v +'/><br><button class="prevButton"><</button><button class="nextButton">></button><br><h3>'+ m + '</h3><br><p>'+ l +'</p>',
          animation: {
            open: {height: 'toggle'},
            close: {height: 'toggle'},
            easing: 'swing',
            speed: 200
          }
        })
      })
    })
  }
})

标签： javascriptjquery

Answer 1

所以几个小时后，我做了这个，它不是很优雅，但它达到了我想要的效果：

$('body').click(function(event) {
  $.noty.closeAll()
});
 let person = $(".cl-item")
      let m
      let v
      let l
      let c
      person.each(function(i, el){
       $(this).css('cursor', 'pointer')
       $(this).click(function(e){
          e.stopPropagation()
          m = $.trim($(this).find('h3').text())
          l = $.trim($(this).find('p').text())
          v = $.trim($(this).find('img').attr('src'))  
          c = $(this).html()     
          let n = noty({
            theme: 'relax',
            modal: true,
            closeWith: ['backdrop', 'button'],
            dismissQueue: false,
            layout: 'center',
            buttons: [
                 {
                    addClass: 'prevButton', text: '<', onClick: function(e, $noty) {
                     e.stopPropagation()
                     if (el.previousElementSibling != null) {
                      document.querySelector('div.mycl-item').innerHTML = el.previousElementSibling.innerHTML
                      el = el.previousElementSibling
                     }
                    }
                 },
                 {
                    addClass: 'nextButton', text: '>', onClick: function(e, $noty) {
                     e.stopPropagation()
                     if (el.nextElementSibling != null) {
                      document.querySelector('div.mycl-item').innerHTML = el.nextElementSibling.innerHTML
                      el = el.nextElementSibling
                     }
                    }
                  }
            ],
            text: '<div onClick="$.noty.closeAll()" class="button_close">X</div>' + '<div onClick="event.stopPropagation();" class="mycl-item">'+ c +'</div>',
            animation: {
                open: {height: 'toggle'},
                close: {height: 'toggle'},
                easing: 'swing',
                speed: 100
            }
          })
        })
      })