使用图像显示和隐藏

Show and Hide using an image

本文关键字：隐藏 显示 图像      更新时间：2023-09-26

在下面的代码中，我希望将"隐藏我"和"显示我"更改为图像。如果我只是在字符串的位置添加图像标签，我得到的是图像标签的字符串而不是图像，可以在这里完成吗？

 $(document).ready(function() {
   var show; // declare variable to hold show/hide state
   $(".apps .thebody").hide();
   $(".showme a").click(function(event) { // show/hide apps
     if (!show) {
       showhide($(this), "Hide me", true);
     } // Need to change the "Hide me" to an image, <img src="images/hide.png" height="41" width="45">
     else {
       showhide($(this), "Show me", false);
     } //  Need to change the "Show me" to an image, <img src="images/show.png" height="41" width="45">
     return false; // u know: disable usual link click function
     function showhide(what, swaptext, swapstate) {
       $(what).parents(".showme").prev(".thebody").toggle('fast');
       $(what).text(swaptext);
       show = swapstate; // pass the current state to
     }
   });
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="apps">
  <div class="thebody">
    <div style="font-size: 11px">
      My stuff will be here...
    </div>
  </div>
  <div class="showme">
    <a href='' title='Show App'>
      <img src="images/show.png" height="41" width="45">
    </a>
  </div>
</div>

感谢您的观看！

 $(document).ready(function() {
   var show; // declare variable to hold show/hide state
   $(".apps .thebody").hide();
   $(".showme a").click(function(event) { // show/hide apps
     if (!show) {
       showhide($(this), "<img src='images/show.png' height='41' width='45'>", true);
     } // Need to change the "Hide me" to an image, <img src="images/hide.png" height="41" width="45">
     else {
       showhide($(this), "<img src='images/show.png' height='41' width='45'>", false);
     } //  Need to change the "Show me" to an image, <img src="images/show.png" height="41" width="45">
     return false; // u know: disable usual link click function
     function showhide(what, swaptext, swapstate) {
       $(".thebody").toggle('fast');
       $(what).html(swaptext);
       show = swapstate; // pass the current state to
     }
   });
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="apps">
  
  <div class="showme">
    <a href='' title='Show App'>
      <img src="images/show.png" height="41" width="45">
    </a>
  </div>
  <div class="thebody">
    <div style="font-size: 11px">
      My stuff will be here...
    </div>
  </div>
</div>

我编辑的内容：

  1. 将文本更改为 IMG 标记
  2. 使用"html"而不是"text"。 text将呈现为内部文本，而html将呈现为 HTML。

您应该能够更改一行，然后再次开始使用图像标签。

更改此设置：

$(what).text(swaptext);

对此...

$(what).html(swaptext);

你可以把你的代码简化成这样的东西（其中你的"图像"在你的css中，而不是你的html/etc）：

$('.hideShow').click(function(){
$('.toggleMe').slideToggle();
$('.hideShow').toggleClass("newClass");
});
img{
  height:100px;
  width:100px;
  background:url("http://placekitten.com/g/300/300"); 
}
.newClass{
  background-image:url("http://placekitten.com/g/200/200");
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggleMe">im toggling!!!</div>
<img src="" class="hideShow" />

如果你愿意，你甚至不必有这个的img标签！一个有序的div就可以了（只要你应用类"hideShow"）

相关文章：