Question

am将所有图像放到var画廊中，最终以35为索引。在单击时，我想根据所显示的元素查找元素的索引。我知道这很令人困惑，但请查看代码。

var currentImg = gallery.indexOf($("#mainImg"));


<center>   
    <div id="main"> 
        <img id="mainImg" src="pictures/Front house.jpg" alt="not sure 
what this is"/> <br>
    </div> 
      <img class="next" src="pictures/arrow-left.png" alt=""/>   
<div id="gallery" >

    <img class="mySlides" src="pictures/28.jpg" alt=""  >
    <img class="mySlides" src="pictures/27.jpg" alt=""  >
    <img class="mySlides" src="pictures/18.jpg" alt=""  >
    <img class="mySlides" src="pictures/9.jpg"  alt=""  >
    <img class="mySlides" src="pictures/10.jpg" alt=""  >
    <img class="mySlides" src="pictures/4.jpg"  alt=""  >
    <img class="mySlides" src="pictures/7.jpg"  alt=""  >
    <img class="mySlides" src="pictures/2.jpg"  alt=""  >
    <img class="mySlides" src="pictures/5.jpg"  alt=""  >
    <img class="mySlides" src="pictures/24.jpg" alt=""  >


    <img class="mySlides" src="pictures/23.jpg" alt=""  >
    <img class="mySlides" src="pictures/8.jpg"  alt=""  >
    <img class="mySlides" src="pictures/1.jpg"  alt=""  >
    <img class="mySlides" src="pictures/11.jpg" alt=""  >
    <img class="mySlides" src="pictures/12.jpg" alt=""  >
    <img class="mySlides" src="pictures/14.jpg" alt=""  >
    <img class="mySlides" src="pictures/21.jpg" alt=""  >
    <img class="mySlides" src="pictures/19.jpg" alt=""  >
    <img class="mySlides" src="pictures/29.jpg" alt=""  >
    <img class="mySlides" src="pictures/31.jpg" alt=""  >

    <img class="mySlides" src="pictures/32.jpg" alt=""  >
    <img class="mySlides" src="pictures/33.jpg" alt=""  >
    <img class="mySlides" src="pictures/34.jpg" alt=""  >
    <img class="mySlides" src="pictures/35.jpg" alt=""  >
    <img class="mySlides" src="pictures/3.jpg"  alt=""  >
    <img class="mySlides" src="pictures/6.jpg"  alt=""  >
    <img class="mySlides" src="pictures/15.jpg" alt=""  >
    <img class="mySlides" src="pictures/16.jpg" alt=""  >
    <img class="mySlides" src="pictures/17.jpg" alt=""  >
    <img class="mySlides" src="pictures/20.jpg" alt=""  >

    <img class="mySlides" src="pictures/22.jpg" alt=""  >
    <img class="mySlides" src="pictures/25.jpg" alt=""  >
    <img class="mySlides" src="pictures/26.jpg" alt=""  >
    <img class="mySlides" src="pictures/30.jpg" alt=""  >
    <img class="mySlides" src="pictures/33.jpg" alt=""  >




    </div>
      <img class="prev" src="pictures/arrow-right.png" alt=""/>
    </center>

//this is my js file
$("#gallery img").on({
    click: function(){
        var imageURL = $(this).attr('src');
        $("#mainImg").fadeOut(800, function (){
        $(this).attr("src", imageURL);
    }).fadeIn(800);}
});  

$(".next").click(nextPic);

function nextPic(){
    // get gallery picts
    var gallery = $(".mySlides");
    // get indexs of current picture
    var currentImg = gallery.indexOf($("#mainImg").attr('src'));

我希望能够在var gallery中找到id = mainImg的索引，但是我知道没有设置此权限。请帮助并说明

Answer 1

您的情况下无法使用Javascript indexOf方法。使用jQuery查找和索引方法可以轻松实现。

function nextPic(){
    // get gallery pics
    var gallery = $(".mySlides");
    var attrSrc = $("#mainImg").attr('src'); // find src attr value of current img
    var mySlidesSel = $(".mySlides[src='"+attrSrc+"']"); // find the same img element from the slider
    var currentImg = gallery.index(mySlidesSel); // get indexs of that
    console.log(currentImg);
}

有关工作示例：检查此Codepen链接， https://codepen.io/ntamil/pen/zyzMLe

查找基于另一个元素的元素索引

1 个答案: