Question

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

 $(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>

感谢您的期待！

Answer 1

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

改变这个：

$(what).text(swaptext);

对此...

$(what).html(swaptext);

Answer 2

＆＃13;

 $(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
     }
   });

 });

＆＃13;

<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>

＆＃13;

我编辑的内容：

将文字更改为IMG标记
使用＆＃34; html＆＃34;而不是＆＃34; text＆＃34;。 text将呈现为内部文本，而html将呈现为HTML。

Answer 3

你可以简化你的代码，就像这样（你的c＆＃39;在你的CSS中，而不是你的html /等）：

＆＃13;

$('.hideShow').click(function(){
$('.toggleMe').slideToggle();
$('.hideShow').toggleClass("newClass");
});

＆＃13;

img{
  height:100px;
  width:100px;
  background:url("http://placekitten.com/g/300/300"); 
}
.newClass{
  background-image:url("http://placekitten.com/g/200/200");
  }

＆＃13;

<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" />

＆＃13;

如果您愿意，您甚至不必拥有此img标签！一个ordingary div会做（只要你应用这个类＆＃34; hideShow＆＃34;）

使用图像显示和隐藏

3 个答案: