0

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

我制作了 2 个 ul li 列表，其中的图像具有相同的 css id，但具有不同的类，这就是我试图区分它们的方式......

<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"
                            });
                        });     
                    }); 
                });
4

2 回答 2

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'
});
于 2013-08-12T15:23:40.900 回答
0

您永远不应该使用重复的 id，更改您的两个标签的 class 和 id tags 值，<ul>以便它们读取

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

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

您正在使用 galleryView 的库在初始化后可能会更改标记，因此请发布您的代码。

于 2013-08-12T09:48:47.480 回答