1

这与我刚刚回答的另一个问题有点不同。我想 <a href="#"><img style="float:right;" src="/explore_btn.png"></a>触发大图像加载到<div id="show_area">. 因此，如果id="list"在为该容器单击 explore_btn.png 时，achor 已将该图像加载到 show_area 中。将有 12 个带有缩略图的不同容器。我怎样才能正确地做到这一点

<script>
$('#list img').on('click',function(){
    var old_img = this.src;
    var new_img =old_img.split('-150x150').join('')
    $('#show_area').html('<img src="'+new_img+'" />');
});
</script>

    <div id="show_area"> large image here </div>

        <div class="container1">
            <a id="list" href="#">
            <img style="float:left;" src="/escher_full-150x150.png" width="150" height="150" />
            </a>
        <div class="search_desc">
        <strong>Escher</strong><br><br>
<!-- clicking explore_btn will load escher_full.png in the show_area div -->
        <a href="#"><img style="float:right;" src="/explore_btn.png"></a>
        </div>
        </div>

        <div class="container2">
            <a id="list" href="#">
            <img style="float:left;" src="/footer_full-150x150.png" width="150" height="150" />
            </a>
        <div class="search_desc">
        <strong>footer</strong><br><br>
        <a href="#"><img style="float:right;" src="/explore_btn.png"></a>
        </div>
        </div>
4

1 回答 1

2

全部更改id="list"为class="list"（因为 ID 必须是唯一的），然后使用：

$('.list img').on('click',function(){

您可以阅读有关ID 属性的信息。您实际上可以更改所有<a>元素，<div>而不是...或者您为什么要拥有<a>？

所以你的代码应该是这样的：

<script>
$(document).ready(function () {
    $('.list img').on('click', function () {
        var old_img = this.src;
        var new_img = old_img.split('-150x150').join('')
        $('#show_area').html('<img src="' + new_img + '" />');
    });
    $('.search_desc img').on('click', function () {
        var origin = $(this).parents('div.search_desc').parent().find('img:first')[0];
        var old_img = origin.src;
        var new_img = old_img.split('-150x150').join('')
        $('#show_area').html('<img src="' + new_img + '" />');
    });
});
</script>

我将您的代码包装在一个就绪函数中，以便在页面完成加载后加载它。

用于测试的FIDDLE

于 2013-08-28T19:02:12.597 回答