jQuery如何将图像源存储到临时内存中并在以后检索它

Question

请查看下图。

当我点击隐藏图像时，所有图像都显示为静态图像，稍后当我取消选中时，它必须立即显示原始图像。

<div id="log_contents">    
    <span style="color:blue;"><b>Public chat</b> with <b>dragos123</b></span> <br><br>    
    <div class="chat-line"> 
        <span class="dialogue_time">  11:00:39 AM &nbsp;</span>
        <span style="background-color:FFF;">debasish:</span>
        <span style="background-color:FFF;"><img  style="cursor:pointer; max-height:80px;" src="http://localhost/myshowcam/files/stickers/msc-1427684408.gif" title=":party1"></span>
    </div>

    <div class="chat-line"> 
        <span class="dialogue_time">  11:01:43 AM &nbsp;</span>
        <span style="background-color:ffff88;">pkk:</span>
        <span style="background-color:ffff88;">hiiiiiiiiiiiiii</span>
    </div>

    <div class="chat-line"> 
        <span class="dialogue_time">  11:02:03 AM &nbsp;</span>
        <span style="background-color:ffff88;">pkk:</span>
        <span style="background-color:ffff88;"><img  style="cursor:pointer; max-height:80px;" src="http://localhost/myshowcam/files/stickers/msc-1427684892.gif" title=":1min"></span>
    </div><div class="pagination" style=""></div>

</div>

请提供宝贵的意见。

谢谢。

Answer 1

您需要在某处保存有关原始版权的信息，否则将无法恢复此更改。

我会将初始代码更改为

$("#log_contents").find('img').each(function() {
    $(this).data('img-org', $(this).attr('src'));
    $(this).attr('src', 'img/hide-image.gif');
});

要扭转它，你只需要做相反的

$("#log_contents").find('img').each(function() {
    $(this).attr('src', $(this).data('img-org'));
});

Answer 2

您可以使用某些属性来存储原始图像源。它不是有效的HTML，但应该有效。

修改：@ Kami与data()的回答更好，所以我改变了我的意见：

＆＃13;

＆＃13;

function change(element){
  if($(element).prop('checked')){  
    $("img").each(function() {
      $(this).data("old-src", $(this).attr("src"));  
    });
    $('img').attr("src", 'http://img005.lazygirls.info/people/tamanna_bhatia/tamanna_bhatia_tamanna_latest_images_7_jpg_jpeg_image_1024_1226_pixels_scaled_76__qWkMn2nO.sized.jpg');
  } else {
    $("img").each(function() {
      $(this).attr("src", $(this).data("old-src"));
    });
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://www.online-image-editor.com/styles/2013/images/example_image.png" /><br />
<img src="http://www.britishlegion.org.uk/ImageGen.ashx?width=800&image=/media/2019101/id23055-normandy-66th_-schools-visit-poppy-choice_-pupils-from-london-city-academy.jpg" /><br />
<input type="checkbox" onclick="change(this)" /> Images off!

＆＃13;

＆＃13;

＆＃13;