Question

我在我的项目中使用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>

当hideseek将<li>设置为<li style="display: none;">时，我绝对希望所有孩子都继承此显示属性，但灯箱仍会在此隐藏的li元素中看到该图片。

所以我需要一个js脚本来改变链接的属性，这样图像就不会出现了。我想出了这段代码：

$(li).is(":hidden") {
  var index = 1;
  var child = this.childNodes[index];
  child.setAttribute("data-lightbox", "none");
}

$(li).not(":hidden") {
  var index = 1;
  var child = this.childNodes[index];
  child.setAttribute("data-lightbox", "image");
}

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

哪种方式最好写出来？

Answer 1

使用removeData()删除值removeAttr()以删除实际属性。使用attr()添加回来。我添加了一个切换这些方法的按钮，显示当您看到红色边框消失时，数据灯箱将被删除。请注意，我添加了多个锚点，并且除了$('a')之外什么也没用，以收集所有链接。 each()等不需要。

详细信息在演示中进行了评论

演示

＆＃13;

children()

＆＃13;

$('button').on('click', function(e) {

  //Check to see if data-lightbox attribute exists
  if (typeof $("a").data('lightbox') !== 'undefined') {

    /* If it does then first remove the value
    || with removeData() then use removeAttr()
    || to actually remove the attribute itself
    */
    $('a').removeData('lightbox').removeAttr('data-lightbox');

  } else {

    /* Otherwise add the data-lightbox attribute
    || along with the value of image
    */
    $('a').attr('data-lightbox', 'image')
  }
});

＆＃13;

[data-lightbox] {
  border: 3px solid red
}

＆＃13;

Answer 2

这里有几件事。 jQuery is和not函数都返回一个布尔值。它们不能用在这里你拥有它们。您的选择器需要引号。最后，为了做你喜欢的Toto，我会创建一个循环遍历li元素的函数，评估显示属性，然后相应地设置“data-lightbox”属性。

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 );

如果隐藏父级，则更改子级的attr

2 个答案:

演示