Question

这与我刚刚回答的另一个问题略有不同。我想要 <a href="#"><img style="float:right;" src="/explore_btn.png"></a>触发大图片加载<div id="show_area">。因此，如果achor具有id="list"，则在单击该容器的explore_btn.png时，将该图像加载到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>

Answer 1

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

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

您可以阅读有关ID属性的 this 。您实际上可以使用<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进行测试

通过on_click显示/隐藏触发器

1 个答案: