0

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

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

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;
});
4

2 回答 2

1

你搞砸了很多事情。首先，您永远不会在框架中显示单击的照片。其次，当您单击锚点内的照片时，默认情况下会将您带到锚点的 href（您需要添加 e.preventDefault() 来防止这种情况，同时确保您传递了 e 参数在点击功能中 - 功能（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'));
});
于 2013-07-15T15:58:08.367 回答
1

将以下行添加到$('#gallery ul li img').on('click', function (){...}部件中：

$('#photo').find('img').prop('src',$(this).prop('src'));

最后结果：

$('#gallery ul li img').on('click', function () {
    $(".selected").hide();
    $('#photo').find('img').prop('src',$(this).prop('src'));

    window.location.href="#photo";
    return false;
});

现场演示

于 2013-07-15T15:59:46.753 回答