JQuery:如何在 jquery 选择器中使用 for 循环变量

JQuery: How to use a for loop variable in a jquery selector?

本文关键字：for 循环 变量 选择器 jquery JQuery      更新时间：2023-09-26

这是我在这里的第一篇文章。

我

正在尝试制作一个照片库，我得到了下面的代码来使用我的网站。我希望当同一个第 n 个子级悬停在 .preview 类中时，同一个第 n 个子级在 .gallery 中受到影响。

$(document).ready(function() {
    $(".preview > :nth-child(1)").mouseover(function() {
        $(".gallery > :nth-child(1)").css("opacity","1");
        $(".gallery :not( > :nth-child(1))").css("opacity","0");
    });
    $(".preview > :nth-child(2)").mouseover(function() {
        $(".gallery > :nth-child(2)").css("opacity","1");
        $(".gallery :not( > :nth-child(2))").css("opacity","0");
    });
    $(".preview > :nth-child(3)").mouseover(function() {
        $(".gallery > :nth-child(3)").css("opacity","1");
        $(".gallery :not( > :nth-child(3))").css("opacity","0");
    });
    $(".preview > :nth-child(4)").mouseover(function() {
        $(".gallery > :nth-child(4)").css("opacity","1");
        $(".gallery :not( > :nth-child(4))").css("opacity","0");
    });
});

然后我想到了一种使用 for 循环的更简单的方法。稍后我计划向 .gallery 和 .preview 添加更多子项，因此 for 循环将使代码更简单。我认为在下面的代码中，问题出在 for 循环变量 i 上。你能看看下面的代码，看看我做错了什么吗？

$(document).ready(function() {
    for (i = 1; i < preview.length; i++) {
        var selector1 = ".preview > :nth-child(" + i + ")";
        var selector2 = ".gallery > :nth-child(" + i + ")";
        var selector3 = ".gallery :not( > :nth-child((" + i + "))";
        $(selector1).mouseover(function() {
            $(selector2).css("opacity","1");
            $(selector3).css("opacity","0");
        });
    }
});

编辑：以下是它适用于的 HTML：

<div class="gallery">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div class="preview">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>

编辑：这是CSS

.gallery > :nth-child(1) {
    background-image: url('https://sp.yimg.com/ib/th?id=HN.607997559404560656&pid=15.1&P=0');
    height: 500px;
    background-size: cover;
    opacity: 1;
}
.gallery > :nth-child(2) {
    background-image: url('http://www.kamionek.waw.pl/images/stories/2012/stadion_narodowy_ii_2012_kamionek_0001.jpg');
    height: 500px;
    background-size: cover;
    position: relative;
    top: -500px;
    opacity: 0;
    margin-bottom: -500px;
}
.gallery > :nth-child(3) {
    background-image: url('http://www.twojezaglebie.pl/wp-content/uploads/2012/02/stadion-narodowy-luty-2012_6521.jpg');
    height: 500px;
    background-size: cover;
    position: relative;
    top: -500px;
    opacity: 0;
    margin-bottom: -500px;
}
.gallery > :nth-child(4) {
    background-image: url('http://upload.wikimedia.org/wikipedia/commons/a/ac/Stadion_Narodowy_w_Warszawie_20120422.jpg');
    height: 500px;
    background-size: cover;
    position: relative;
    top: -500px;
    opacity: 0;
    margin-bottom: -500px;
}
.preview {
    height: 100px;
    width: 100px;
    width: 100%;
}
.preview div {
    height: 100px;
    width: 100px;
    background-size: cover;
    display: inline;
    float: left;
}
.preview > :nth-child(1) {
    background-image: url('https://sp.yimg.com/ib/th?id=HN.607997559404560656&pid=15.1&P=0');
}
.preview > :nth-child(2) {
    background-image: url('http://www.kamionek.waw.pl/images/stories/2012/stadion_narodowy_ii_2012_kamionek_0001.jpg');
}
.preview > :nth-child(3) {
    background-image: url('http://www.twojezaglebie.pl/wp-content/uploads/2012/02/stadion-narodowy-luty-2012_6521.jpg');
}
.preview > :nth-child(4) {
    background-image: url('http://upload.wikimedia.org/wikipedia/commons/a/ac/Stadion_Narodowy_w_Warszawie_20120422.jpg');
}
您可以使用

现有系统执行此操作，如下所示： http://jsfiddle.net/TrueBlueAussie/wn3c84ke/5/

$(document).ready(function () {
    $(".preview div").mouseover(function () {
        var $previews = $('.preview div');
        var $children = $(".gallery").children().not('.preview');
        var $selected = $children.eq($previews.index(this));
        $children.not($selected).css("opacity", "0");
        $selected.css("opacity", "1");
    });
});

它使用悬停的索引位置作为选择索引，但我实际上会推荐这样的数据驱动方法：http://jsfiddle.net/TrueBlueAussie/wn3c84ke/7/

.HTML：

<div class="gallery">
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
    <div id="four"></div>
    <div class="preview">
        <div data-target="#one"></div>
        <div data-target="#two"></div>
        <div data-target="#three"></div>
        <div data-target="#four"></div>
    </div>
</div>

jQuery

$(document).ready(function () {
    $(".preview > div").mouseover(function () {
        var $children = $(".gallery >  *:not(.preview)");
        var $selected = $($(this).attr("data-target"));
        $children.not($selected).css("opacity", "0");
        $selected.css("opacity", "1");
    });
});

使用循环执行此操作的一种方法是：

$(document).ready(function() {
    $(".preview div").each(function(index,object){
        $(object).mouseover(function() {
            $(".gallery div").css("opacity","0");
            $(".gallery div")[index].css("opacity","1");
        });
    });
});

试试这个：

$(".preview").on("mouseover", function () {
    $(".gallery").children().index(this).css("opacity", "0");
    $(this).children().css("opacity", "1");
});
相关文章：