如何使用jQuery更改组中除一个之外的所有元素的属性答案

【问题标题】：How to use jQuery to change attribute of all elements in a group except one如何使用jQuery更改组中除一个之外的所有元素的属性
【发布时间】：2015-11-12 03:49:02
【问题描述】：

我有以下代码显示我的图片库的灯箱。共有三张图片，我需要允许用户单击任何图片以在灯箱中查看图库。问题是，当我单击一个图像时，它不会显示所选图像，而是显示列表中的第一张图像/或用户上次打开灯箱时看到的最后一张图像。 DEMO

我的灯箱中有一个基于http://kenwheeler.github.io/slick/ 的轮播，所以我需要更改轮播的顺序。我注意到插件生成tabindex 属性，所以我试图将其更改为0 for selected image 和-1 for all other images，但代码不起作用。我包含了一个演示，但由于某些原因它根本不起作用。当我尝试使用 JSFiddle 解决问题时，请使用以下代码。

为了解决属性问题，我看了1、2、3这些问题，但不知道怎么用。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>slick - the last carousel you'll ever need</title>
  <link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick-theme.css"/>
  <link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/style.css">


  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
  <style>
#cover-page {
  background: #fff none repeat scroll 0 0;
  margin-left: 15%;
  margin-top: 1%;
  position: absolute;
  width: 70%;
  z-index: 1001;
  visibility:hidden;
}
#black-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    filter: alpha(opacity=75);
    -moz-opacity: 0.75;
    -khtml-opacity: 0.75;
    opacity: 0.75;
    z-index: 1000;
    visibility:hidden;
}
#close{
    position:absolute;
    top:0;
    right:0;
      visibility:inherit;
}
.slick-slider {
  margin-left: 12%;
  margin-right: 9%;
}
.slick-slider {
    -moz-user-select: none;
    box-sizing: border-box;
    visibility:hidden;
    position: relative;
}
.slick-slide img {
  border: 5px solid #fff;
  display: block;
  width: 100%;
}
.slick-next {
  right: -66px;
}

.slick-prev {
  left: -66px;
}

#lightboxCloseBtn {
  text-decoration: none;
  color: purple;

}

.slick-slide.slick-current.slick-active{
  left: 0;
  opacity: 1;
  position: relative;
  top: 0;
  width: 25%;
  z-index: 999;
}

</style>
</head>
<body>
        <div id="black-cover"></div>
        <div id="cover-page">
       <div id="close"><a id="lightboxCloseBtn" href="#" onclick="closeBtn();">X</a></div>
        <h2 id="lightboxHeader">Images</h2>
        <div class="slider fade">
        <div class="lightbox-image"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRu3mvhWwEfOLKJrXAXS4qATDZNtx-l04Vhwi3oXr_62Mz5lEZ-"/></div>
          <div class="lightbox-image"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKGgx0Le2Rwg7-XSWS_EeuGeebpL-PGabrEm9hFLk2llz1MnQY"/></div>
           <div class="lightbox-image"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSMKybiZVNTHLJXR5bukMNmKv3lCHGlkP2muKAfGn0u6VceubqMyQ"/></div>

        </div>
        </div>


        <a onclick="showLightBox('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRu3mvhWwEfOLKJrXAXS4qATDZNtx-l04Vhwi3oXr_62Mz5lEZ-');" href="#"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRu3mvhWwEfOLKJrXAXS4qATDZNtx-l04Vhwi3oXr_62Mz5lEZ-"/></a>
        <a onclick="showLightBox('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKGgx0Le2Rwg7-XSWS_EeuGeebpL-PGabrEm9hFLk2llz1MnQY');" href="#"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKGgx0Le2Rwg7-XSWS_EeuGeebpL-PGabrEm9hFLk2llz1MnQY"/></a>
         <a onclick="showLightBox('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSMKybiZVNTHLJXR5bukMNmKv3lCHGlkP2muKAfGn0u6VceubqMyQ');" href="#"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSMKybiZVNTHLJXR5bukMNmKv3lCHGlkP2muKAfGn0u6VceubqMyQ"/></a>

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
    <script type="text/javascript" src="http://kenwheeler.github.io/slick/js/scripts.js"></script>
    <script type="text/javascript" src="http://kenwheeler.github.io/slick/js/prism.js"></script>
    <script type="text/javascript">

    function showLightBox(address){
            $("#black-cover").css("visibility","visible");
            $("#cover-page").css("visibility","visible");
            $(".slick-slider").css("visibility","visible");
            if($('.lightbox-image.slick-slide.slick-current.slick-active > img').attr('src') != address) {
              alert("here 2");
    $('.lightbox-image.slick-slide.slick-current.slick-active > img').parent().attr('tabindex','-1');

        }
        if($('.lightbox-image.slick-slide.slick-current.slick-active > img').attr('src') == address) {
              alert("here 1");
    $('.lightbox-image.slick-slide.slick-current.slick-active > img').parent().attr('tabindex','0');

        } 
      }

        function closeBtn(){
            $("#black-cover").css("visibility","hidden");
            $("#cover-page").css("visibility","hidden");
            $(".slick-slider").css("visibility","hidden");

}

        var disqus_shortname = 'slickcarousel';

        (function() {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();
    </script>

</body>
</html>

以下是插件生成的代码：

<div id="cover-page" style="visibility: visible;">
    <div id="close">
        <a onclick="closeBtn();" href="#" id="lightboxCloseBtn">X</a>
    </div>
    <h2 id="lightboxHeader">Images</h2>
    <div class="slider fade slick-initialized slick-slider" role="toolbar"
        style="visibility: visible;">
        <button role="button" aria-label="Previous"
            class="slick-prev slick-arrow" data-role="none" type="button"
            style="display: block;">Previous</button>
        <div class="slick-list draggable" aria-live="polite">
            <div class="slick-track" style="opacity: 1; width: 3735px;"
                role="listbox">
                <div class="lightbox-image slick-slide slick-current slick-active"
                    data-slick-index="0" aria-hidden="false"
                    style="width: 1245px; position: relative; left: 0px; top: 0px; z-index: 999; opacity: 1;"
                    tabindex="-1" role="option" aria-describedby="slick-slide00">
                    <img
                        src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRu3mvhWwEfOLKJrXAXS4qATDZNtx-l04Vhwi3oXr_62Mz5lEZ-">
                </div>
                <div class="lightbox-image slick-slide" data-slick-index="1"
                    aria-hidden="true"
                    style="width: 1245px; position: relative; left: -1245px; top: 0px; z-index: 998; opacity: 0;"
                    tabindex="-1" role="option" aria-describedby="slick-slide01">
                    <img
                        src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKGgx0Le2Rwg7-XSWS_EeuGeebpL-PGabrEm9hFLk2llz1MnQY">
                </div>
                <div class="lightbox-image slick-slide" data-slick-index="2"
                    aria-hidden="true"
                    style="width: 1245px; position: relative; left: -2490px; top: 0px; z-index: 998; opacity: 0;"
                    tabindex="-1" role="option" aria-describedby="slick-slide02">
                    <img
                        src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSMKybiZVNTHLJXR5bukMNmKv3lCHGlkP2muKAfGn0u6VceubqMyQ">
                </div>
            </div>
        </div>



        <button role="button" aria-label="Next" class="slick-next slick-arrow"
            data-role="none" type="button" style="display: block;">Next</button>
        <ul class="slick-dots" style="display: block;" role="tablist">
            <li class="slick-active" aria-hidden="false" role="presentation"
                aria-selected="true" aria-controls="navigation00" id="slick-slide00"><button
                    tabindex="0" aria-required="false" role="button" data-role="none"
                    type="button">1</button></li>
            <li aria-hidden="true" role="presentation" aria-selected="false"
                aria-controls="navigation01" id="slick-slide01"><button
                    tabindex="0" aria-required="false" role="button" data-role="none"
                    type="button">2</button></li>
            <li aria-hidden="true" role="presentation" aria-selected="false"
                aria-controls="navigation02" id="slick-slide02"><button
                    tabindex="0" aria-required="false" role="button" data-role="none"
                    type="button">3</button></li>
        </ul>
    </div>
</div>

【问题讨论】：

你能创建一个最小的例子吗？
@joshhunt 我将代码粘贴到 JSFiddle 中，但它不起作用。我正在做。您还希望我做出哪些其他更改？
tabindex 属性从 1 开始，因此 0 和 -1 同样无用。实际上不确定您想在这里使用tabindex 做什么...
@Jack 可能不使用您的原始代码，而是尝试创建一个基本演示来演示您想要做什么，这也可能会帮助您找到解决方案。 @Deryck tabindex 0 和 -1 确实有目的。例如。您可以将 0 分配给 <div> 以使其可选项卡（不更改选项卡优先级）并将 -1 分配给 <button> 使其不可选项卡。
@Deryck 我需要做的就是一旦用户选择一张图片，所选图片就会显示在灯箱中。

标签： javascript jquery css

【解决方案1】：

您的问题是您的 Javascript 设置为加载 onload，如果您将其包装在头部（并在演示中添加 jQuery），它可以正常工作：http://jsfiddle.net/zwugprj3/3/

发生这种情况是因为脚本的范围不同，所以onclick="..." 无权访问您的函数。

一般情况下，请停止使用onclick 属性！

请改用addEventHandler。您仍然可以使用以下数据属性将 URL（您的参数）放入 HTML 中：<img src="/small.png" data-large-src="/large.png">。

更新：阅读直到 Slick 的文档结尾：http://jsfiddle.net/zwugprj3/22/，实际上您应该使用一种方法来更改幻灯片。直接更改库的内部细节几乎不是一个好主意....

【讨论】：

我试过你提供的demo，它显示了灯箱但没有解决问题，问题是图像是从0-1-2列出的，如果你点击灯箱1或2仍然显示 id 为 0 的图像。
@Jack：我添加了一个实际可行的解决方案......它只是看看文档，这真的是你的工作。
感谢，我这几天生病了。将看看您的解决方案。

【解决方案2】：

两点。
(1) tabIndex 用于设置tab顺序，一般在表单中，让tab键知道如何从一个元素导航到另一个元素。它不会自动将 DOM 元素移动到前台。您要完成的是让生成的轮播“跳转”到从主页选择的图像。
(2) 由于您使用的是 slick，因此您希望在加载时使用“initialSlide”参数来告诉 slick 从哪个（三个）幻灯片开始。
从他们的文档中，您可以在激活幻灯片时通过执行以下功能进行设置：

$(document).ready(function(){
  $('.your-class').slick({
  initialSlide: 1
  });
});

【讨论】：

【解决方案3】：

我不会尝试使用tabindex 属性，而是指示 Slick 开始显示带有所选幻灯片的图像。有一个名为slickGoTo(..) 的方法可以用来这样做：

slickGoTo( index : int, dontAnimate : bool) 按索引滑动，如果第二个参数设置为 true，则跳过动画

因此你的函数看起来像：

function showLightBox(address){
    $("#black-cover").css("visibility","visible");
    $("#cover-page").css("visibility","visible");
    $(".slick-slider").css("visibility","visible");

    // find the image with the same address
    var index = 0;
    var notFound = true;

    $('.lightbox-image > img').each( function() {
      var sameAddress = $(this).attr('src') == address ;
      if (notFound && !sameAddress) index++;
      else notFound = false;
    });

    // Set initial slide
    $('.slick-slider').slick('slickGoTo', index, true);
}

见jsfiddle

【讨论】：

这会设置 Slick 选项，因此您不必在每次点击时都销毁和创建整个轮播（如其他解决方案中所建议的那样）。

【解决方案4】：

根据您的问题，我觉得您想手动处理这种情况，将所有其他图像的索引更改为-1，然后设置当前选择的一个，这是正确的吗？如果是这种情况，请告诉我，我会帮你解决的。

【讨论】：

【解决方案5】：

在 slick 的 Github 上，我看到了很多相同问题的问题 1 ， 2 ....
initialSlide 必须有效，但在这个问题中，您可以看到许多解决问题的解决方法示例。这种 slick 配置必须有效。

 $('.my-slider').slick({
        dots: true,
        infinite: true,
        slidesToShow: 4,
        slidesToScroll: 3,
        initialSlide: 2
    });

【讨论】：

【解决方案6】：

似乎有一个名为initialSlide（默认值：0）的特定参数可以用于此目的。只需传递被点击的图像的索引，就可以了。

正如documentation中提到的，参数initial slide只能在启动轮播时使用，因此如果您想决定仅在单击时才聚焦哪个图像，则可以在以下情况下启动轮播单击您的一张图片，当用户关闭轮播时，您应该使用 unslickparameter 将其销毁，如下所示：

$('.your-slider').slick('unslick');

然后，如果他单击其他图像，只需使用正确的 initialSlide 参数重新启动轮播。

查看文档：http://kenwheeler.github.io/slick/

【讨论】：

这似乎是用于初始化而不是运行时更改，如果不是如何更改它你有线索吗？我不知道该怎么办。
如果是这种情况，您可以仅在单击图像时初始化插件，然后立即处理轮播。为每一次额外的点击再做一次...

【解决方案7】：

试试这个代码。

HTML

<div id="black-cover" style="display:none;"></div>
<div id="cover-page" style="display:none;">
        <div id="close">
            <a id="lightboxCloseBtn" href="#" onclick="closeBtn();">X</a>
        </div>
        <h2 id="lightboxHeader">Images</h2>
        <div class="your-class">
            <div>
                <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRu3mvhWwEfOLKJrXAXS4qATDZNtx-l04Vhwi3oXr_62Mz5lEZ-" />
            </div>
            <div>
                <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKGgx0Le2Rwg7-XSWS_EeuGeebpL-PGabrEm9hFLk2llz1MnQY" />
            </div>
            <div>
                <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSMKybiZVNTHLJXR5bukMNmKv3lCHGlkP2muKAfGn0u6VceubqMyQ" />
            </div>
        </div>
</div>
<a href="#" class="img" data-value="0"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRu3mvhWwEfOLKJrXAXS4qATDZNtx-l04Vhwi3oXr_62Mz5lEZ-"/></a>

<a href="#" class="img" data-value="1"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKGgx0Le2Rwg7-XSWS_EeuGeebpL-PGabrEm9hFLk2llz1MnQY"/></a>

<a href="#" class="img" data-value="2"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSMKybiZVNTHLJXR5bukMNmKv3lCHGlkP2muKAfGn0u6VceubqMyQ"/></a>

JS

$(document).ready(function () {
    $('.img').click(function () {
        var CurrentImg = $(this).attr('data-value')
        $("#black-cover").show()
        $("#cover-page").show()
        $('.your-class').slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            initialSlide: CurrentImg
        });
    })
})

function closeBtn() {
    $("#black-cover").hide()
    $("#cover-page").hide()
    $('.your-class').slick('unslick');
}

Demo

【讨论】：

【解决方案8】：

由于滑块的实施方式，您更改顺序的尝试将无效。我已经通过默认显示您点击的图像解决了固有问题。

  function showLightBox(address){
            $("#black-cover").css("visibility","visible");
            $("#cover-page").css("visibility","visible");
            $(".slick-slider").css("visibility","visible");
            //slick-dots
            var index = $('.lightbox-image.slick-slide > img[src="' + address + '"]').parent().index();
            $('ul.slick-dots > li').eq(index).find('button').click();
      }

        function closeBtn(){
            $("#black-cover").css("visibility","hidden");
            $("#cover-page").css("visibility","hidden");
            $(".slick-slider").css("visibility","hidden");

}

^^ 那是您的 jsFiddle 中修改后的 javascript
我的jsFiddle可以在这里查看http://jsfiddle.net/q6t8v3zf/1/

【讨论】：

【解决方案9】：

当用户单击图像时，您应该使用相关图像构建光滑的滑块。您可以通过将图像的索引注入到保存光滑滑块构造函数的函数来做到这一点：

function startSlider (index) {
  // put here all the css visibility you did
  $('.your-sliders-class').slick({
    initialSlide: index      // the first slide's index is 0, second is 1...
  })
}

所以你的 onclick 函数看起来像：

第一张图片 - onclick="startSlider(0)"

第二张图片 - onclick="startSlider(1)"

等等……

另外，当用户关闭灯箱时，您应该销毁滑块，这样当他下次单击图像时，灯箱将构建正确的初始幻灯片：

function closeBtn(){
   $("#black-cover").css("visibility","hidden");
   $("#cover-page").css("visibility","hidden");
   $(".slick-slider").css("visibility","hidden");
   $('.your-sliders-class').slick('unslick');
}

【讨论】：

【解决方案10】：

试试这个

HTML CODE:

<a onclick="showLightBox(0);" href="#"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRu3mvhWwEfOLKJrXAXS4qATDZNtx-l04Vhwi3oXr_62Mz5lEZ-"/></a>
    <a onclick="showLightBox(1);" href="#"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKGgx0Le2Rwg7-XSWS_EeuGeebpL-PGabrEm9hFLk2llz1MnQY"/></a>
     <a onclick="showLightBox(2);" href="#"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSMKybiZVNTHLJXR5bukMNmKv3lCHGlkP2muKAfGn0u6VceubqMyQ"/></a>



JS CODE:

  function showLightBox(idx){
        $("#black-cover").css("visibility","visible");
        $("#cover-page").css("visibility","visible");
        $(".slick-slider").css("visibility","visible");
        $('.slick-dots li button').eq(idx).trigger('click');

  }

【讨论】：