按on_click显示/隐藏触发器

Show/hide trigger by on_click

本文关键字：隐藏 触发器 显示 click on      更新时间：2023-09-26

这与我刚刚回答的另一个问题有点不同。 我想要 <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>

将所有id="list"更改为class="list"(因为 ID 必须是唯一的(，然后使用以下命令：

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

您可以阅读有关 ID 属性的信息。您实际上可以使用<div>更改所有<a>元素...或者你为什么要<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>

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

用于测试的小提琴

相关文章：