个人中心
gpt4 book ai didi

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

转载 作者：可可西里 更新时间：2023-11-01 02:08:03 27 4
gpt4 key购买 nike

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

最佳答案

试试这个

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

  }

关于javascript - 如何使用 jQuery 更改组中除一个元素之外的所有元素的属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32085438/

27 4 0
文章推荐： javascript - 是否可以使用 webpack 在浏览器中动态配置 `publicPath`？
文章推荐： java - 如何将 HTTP 生命周期中间件处理程序添加到 spring？
文章推荐： iOS 媒体库 : React to Access Apple Music Alert
文章推荐： java - 使用 Java 删除 BOM 字符
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com