Javascript 更改子项'；如果父项被隐藏，则为s attr

我在我的项目中使用lightbox和hideseek插件，希望在它们之间添加交互（一个必须遵循另一个的规则）

以下是我的HTML代码：

<li>
  <p>I love hay bales. Took this snap on a drive through the countryside past some straw fields.</p>
  <a href="photos/01.jpg" alt ='Hay Bales' data-lightbox="image" data-title="I love hay bales. Took this snap on a drive through the countryside past some straw fields.">
    <img src="photos/thumbnails/01.jpg" alt="Hay Bales">
  </a>
</li>

但两者都不起作用。第一个应该通过更改attr来隐藏元素，第二个应该设置回元素，因为父元素再次可见

哪种方式写出它最好？

使用

removeData（）

删除该值，然后

removeAttr（）

删除实际属性。使用

attr（）

将其添加回。我添加了一个按钮来切换这些方法，当您看到红色边框消失时，数据灯箱将被删除。请注意，我添加了多个锚，除了使用

$（'a'）

收集所有链接外，没有其他用途

each（）

，

children（）

等不需要

详细信息将在演示中进行注释

演示

$（'button'）。在（'click'，函数（e）{
//检查数据灯箱属性是否存在
if（typeof$（“a”）.data（'lightbox'）！='undefined'）{
/*如果确实如此，则首先删除该值
||使用removeData（）然后使用removeAttr（）
||要实际删除属性本身
*/
$（'a'）.removeData（'lightbox'）.removeAttr（'data-lightbox'）；
}否则{
/*否则，请添加数据lightbox属性
||伴随着图像的价值
*/
$（'a'）.attr（'data-lightbox'，'image'））
}
});
[数据灯箱]{
边框：3件纯红
}

我喜欢干草捆。这张照片是在开车穿过乡村经过一些麦田时拍的


开/关
这里有几件事。jQuery
的is
和
not
函数都返回一个布尔值。它们不能像你这里有的那样被使用。你的选择器需要引号。最后，为了完成您要做的事情，我将创建一个函数，该函数通过li元素循环，计算显示属性，然后相应地设置“数据灯箱”属性

function hideSeek(){
    var lis = $(‘li’);  // collection of the li elements

   // iterate through lis
    lis.forEach( function(elem) {

        /* 
            Ternary checks if the li has a attribute 
            of display none if so find the a and set 
            its data-light box to none else set it to 
            image.
         */
        $(elem).attr(‘display’) === ‘none’  ?  $(elem).find(‘a’).attr(‘data-lightbox’, ‘none’) : $(elem).find(‘a’).attr(‘data-lightbox’, ‘image’);
    });

}

$(‘button’).on(‘click’, hideSeek );

lightbox不显示和隐藏它实例化的内容吗？为什么要使用两个类似的插件？我认为这里的关键点是，lightbox中显示的图像不是列表的子项，它们实际上是插入页面底部的div
#lightbox
，然后是
.lb container
或类似的东西。您能提供所需结果的描述吗？虽然我不知道为什么，但我已经回答了如何删除和添加
数据灯箱的问题。
function hideSeek(){
    var lis = $(‘li’);  // collection of the li elements

   // iterate through lis
    lis.forEach( function(elem) {

        /* 
            Ternary checks if the li has a attribute 
            of display none if so find the a and set 
            its data-light box to none else set it to 
            image.
         */
        $(elem).attr(‘display’) === ‘none’  ?  $(elem).find(‘a’).attr(‘data-lightbox’, ‘none’) : $(elem).find(‘a’).attr(‘data-lightbox’, ‘image’);
    });

}

$(‘button’).on(‘click’, hideSeek );