隐藏galleryView插件而不刷新

Question

我在页面中使用jquery加载内容，而不刷新内容，只显示所需内容。在画廊div我有一个“其他摄影”和“裸体艺术”的链接。通过单击其中的每一个，它将使用给定的图片初始化图库。然而，一旦我使其中一个无效，就没有办法把它藏起来为另一个人创造空间。

我为css制作了两个带有相同id的图片的ul li列表，但是使用不同的类，这就是我试图区分它们的方式.

<div id="underage">
  <ul class="galleryShow">
    ...
  </ul>
</div>

<div id="adult">
  <ul class="galleryShow">
    ...
  </ul>
</div>

，这是Jquery

$('#galleryButton').click(function() {
                $('.mainBody').slideUp().ready(function() {
                    $('#gallery').slideDown(600).ready(function() {

                            $('#otherPhotoButton').click(function() {
                                /*$('.adult').hide();*/
                                $('.underage').galleryView();
                            });

                            $("#nudeButton").confirm({
                                text: "Are you over 18?",
                                confirm: function(button) {
                                    /*$('.undergage').hide();*/
                                    $('.adult').galleryView();
                                },
                                cancel: function(button) {
                                    window.location.href = "https://www.google.hu/search?q=puppies";
                                },
                                confirmButton: "Yes I am",
                                cancelButton: "No"
                            });
                        });     
                    }); 
                });

Answer 1

令人恼火的是，GalleryView插件似乎没有将ID保留在应用它的元素上。

要解决这一问题，请稍微修改HTML：

<div id="underage">
    <ul class="galleryShow">
        ...
    </ul>
</div>

<div id="adult">
    <ul class="galleryShow">
        ...
    </ul>
</div>

下面是一些应该工作的按钮的JavaScript：

$('#otherPhotoButton').click(function() {
    if ($('#underage ul').length) {
        $('#underage ul').galleryView();
    }
    $('#underage').show();
    $('#adult').hide();
});
$('#nudeButton').confirm({
    text: 'Are you over 18?',
    confirm: function(button) {
        if ($('#adult ul').length) {
            $('#adult ul').galleryView();
        }
        $('#adult').show();
        $('#underage').hide();
    },
    cancel: function(button) {
        window.location.href = 'https://www.google.hu/search?q=puppies';
    },
    confirmButton: 'Yes, I am',
    cancelButton: 'No'
});

Answer 2

您不应该使用重复的id，更改两个<ul>标记的类和id标记值，以便它们读取。

<ul id="underage" class='galleryShow'>
<ul id="adult" class='galleryShow'>

并将#galleryShow中的所有css更改为.galleryShow。

您正在使用的galleryView库可能会在标记初始化后更改它，所以请使用您的代码。