时间戳

首页 > 解决方案 > 我正在尝试使用 jquery toggle 在文本和图像之间交换

javascript - 我正在尝试使用 jquery toggle 在文本和图像之间交换

问题描述

我试图使用jquery“切换”来隐藏带有文本的div并显示图像，反之亦然，但是当我单击按钮时它不起作用。该按钮来自一个引导示例：这是导致问题的原因吗？

代码：

$("#btn1").click(function() {
  $("#struttura").toggle();
  $("#foto1").toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="struttura">
  lorem ipsum
</div>
<img id="foto1" src="greppistruttura.jpg" style="display: hidden;">
<p><a class="btn btn-secondary" role="button" id="btn1">View details &raquo;</a></p>

标签： javascripthtmljquery

解决方案

将您的代码放在 jquery 代码块中以在页面加载后运行。然后添加一个初始切换来隐藏您的 div 并且无需向您的 img 添加样式。像这样：

$(function() {
     $("#struttura").toggle();
     $("#btn1").click(function() {
        $("#struttura").toggle();
        $("#foto1").toggle();
     });
});

推荐阅读