Question

我正在一个网站上显示8张图片的画廊。如果单击其中一个图像，浏览器将向下滚动650px，然后打开另一个容器（图像+描述文本）。单击按钮将关闭其他信息，浏览器窗口将再次向上移动。那很好。

我的问题：如果已经打开了一个块，并且用户打开了第二个块，则应从第一个块中删除“ ausklappen”类，以使其再次不可见。

谢谢你的想法拉斐尔

链接到开发区：http://homepage-4-you.net/andersicht/

我的HTML：图库：

<ul class="wp-block-gallery columns-4 is-cropped galerie-schmal"> 
<li class="blocks-gallery-item"><figure><img src=„example.com“ alt="" /><figcaption>name 1 </figcaption></figure></li>
<li class="blocks-gallery-item"><figure><img src=„example.com“ alt="" /><figcaption>name 2 </figcaption></figure></li> 
    …
<li class="blocks-gallery-item"><figure><img src=„example.com“ alt="" /><figcaption>name 8 </figcaption></figure></li>
</ul>

另外8个块：

<div class="wp-block-media-text alignwide einzelportrait1 ausklappen“></div>
<div class="wp-block-media-text alignwide einzelportrait2 ausklappen“></div>
…
<div class="wp-block-media-text alignwide einzelportrait8 ausklappen“></div>

返回按钮：

<div class=„einzelportrait_button“> <img src=„examle.com“ alt=„“ /></div>

我的jQuery：

1）向下滚动，（最后）再次向上滚动：

$(".blocks-gallery-item img").click(function(event){
    $('html, body').animate({scrollTop: '+=650px'}, 800);
});

 $(".einzelportrait_button").click(function(event){
    $('html, body').animate({scrollTop: '-=650px'}, 800);
});

2）打开其他信息块

$( "ul.wp-block-gallery li:nth-child(1)" ).on( "click", function() {
      $( ".einzelportrait1" ).addClass( "ausklappen");
    });   

$( "ul.wp-block-gallery li:nth-child(2)" ).on( "click", function() {
      $( ".einzelportrait2" ).addClass( "ausklappen");
    });  

$( "ul.wp-block-gallery li:nth-child(3)" ).on( "click", function() {
      $( ".einzelportrait3" ).addClass( "ausklappen");
    });  

$( "ul.wp-block-gallery li:nth-child(4)" ).on( "click", function() {
      $( ".einzelportrait4" ).addClass( "ausklappen");
    });  

$( "ul.wp-block-gallery li:nth-child(5)" ).on( "click", function() {
      $( ".einzelportrait5" ).addClass( "ausklappen");
    });  

$( "ul.wp-block-gallery li:nth-child(6)" ).on( "click", function() {
      $( ".einzelportrait6" ).addClass( "ausklappen");
    });  

$( "ul.wp-block-gallery li:nth-child(7)" ).on( "click", function() {
      $( ".einzelportrait7" ).addClass( "ausklappen");
    });  

$( "ul.wp-block-gallery li:nth-child(8)" ).on( "click", function() {
      $( ".einzelportrait8" ).addClass( "ausklappen");
    });

3）关闭其他信息

$(".einzelportrait_button").click(function(){
        $(".einzelportrait1, .einzelportrait2, .einzelportrait3, .einzelportrait4, .einzelportrait5, .einzelportrait6, .einzelportrait7, .einzelportrait8").removeClass("ausklappen");
    });

Answer 1

在这种情况下使用:nth-child并不是一种简单的方法..相反，您可以使用index()进行操作

第一：给einzelportrait1 , einzelportrait2 , einzelportrait3...像einzelportrait一样的类，没有数字

<div class="wp-block-media-text alignwide einzelportrait ausklappen“></div>

2nd：在js中仅使用一次单击事件

$( "ul.wp-block-gallery li" ).on( "click", function() {
    var ThisIndex = $(this).index();
    $( ".einzelportrait.ausklappen").removeClass("ausklappen");
    $( ".einzelportrait:eq("+ThisIndex+")").addClass("ausklappen");
});

只有一个额外的容器应该打开/ jQuery

1 个答案: