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

Posted 2023-02-25

【中文标题】使用 jquery 中的每个循环的 Next 和 Prev 按钮功能

【英文标题】：Next and Prev buttons feature using each loop in jquery

【发布时间】：2018-11-14 11:34:33

【问题描述】：

我的 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"    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
          
        )
      )
    )
  
)

【参考方案1】：

您可以使用他们的按钮并挂钩任何您想要的功能：

 buttons: [
   
     addClass: 'btn btn-primary', text: 'Prev', onClick: function($noty) 
        // Do your magic
     
   ,
   
     addClass: 'btn btn-primary', text: 'Next', onClick: function($noty) 
        // Do your magic
     
   
 ]

【讨论】：

谢谢 Mojo Allmight，老实说，这是我不知道如何使用 jquery 的神奇部分。

【参考方案2】：

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

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