Question

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

我用css的id相同的图片制作了2个ul列表，但是对于不同的类，这就是我试图区分它们的方式......

<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的库可能会在初始化后更改标记，因此请发布一个小提示代码。

隐藏galleryView插件而不刷新

2 个答案: