javascript - 点击照片更改

Question

我想创建一个功能，我可以从几张照片中进行选择，如果我点击其中一张，它应该在也显示的大框架中发生变化(照片)。

我想我可能搞乱了选择器。

HTML

<div id="photo">
    <img src="http://hd.highresolution-wallpapers.net/wallpapers/space_dimesional_sun-600x800.jpg" alt="Space" />
</div>
<div id="gallery">
    <ul>
        <li class="selected"><a href="http://hd.highresolution-wallpapers.net/wallpapers/space_dimesional_sun-600x800.jpg"><img src="http://hd.highresolution-wallpapers.net/wallpapers/space_dimesional_sun-600x800.jpg" alt="Space" /></a>
        </li>
        <li><a href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSh_AgoWSwWBYuvqlbD7kzIrtcPRCV3jGzn5H4fosJRba8JzE1-Ow"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSh_AgoWSwWBYuvqlbD7kzIrtcPRCV3jGzn5H4fosJRba8JzE1-Ow" alt="Grass" /></a>
        </li>
        <li><a href="http://sitch.org/sailing/images/2006-11-17__sun__600_800.jpg"><img src="http://sitch.org/sailing/images/2006-11-17__sun__600_800.jpg" alt="Water" /></a>
        </li>
    </ul>
</div>

Javascript

$('.selected').fadeIn();
$("#gallery ul li").on("click", function () {
    var selector = '#gallery ul li[src="' + $(this).attr('href') + '"]';

    $(".selected").hide();

    $("#gallery ul li").fadeIn();
    return false;
});

$('#gallery ul li img').on('click', function () {
    $(".selected").hide();
    var next = $(this).next();
    if (next.length > 0) {
        next.fadeIn();
    } else {
        $('.selected').fadeIn();
    }
    return false;
});

Answer 1

你搞砸了很多事情。首先，您永远不会在框架中显示单击的照片。其次，当您单击 anchor 内的照片时，默认情况下它将带您到 anchor 的 href(您需要添加 e.preventDefault() 来防止这种情况，还要确保传递 e 参数在点击函数中 - function(e)

HTML

<div id="photo">
        <img src="http://hd.highresolution-wallpapers.net/wallpapers/space_dimesional_sun-600x800.jpg" alt="Space"/>
    </div>
<div id="gallery">
        <ul>
            <li class="selected"><img src="http://hd.highresolution-wallpapers.net/wallpapers/space_dimesional_sun-600x800.jpg" alt="Space" /></li>
            <li><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSh_AgoWSwWBYuvqlbD7kzIrtcPRCV3jGzn5H4fosJRba8JzE1-Ow" alt="Grass" /></li>
            <li><img src="http://sitch.org/sailing/images/2006-11-17__sun__600_800.jpg" alt="Water" /></li>
        </ul>
    </div>

Javascript

$(document).on('click', '#gallery img', function() {
    $('#photo').attr('src', $(this).attr('src'));
});