如何使用 .load() 使用 jQuery 切换图像？

Posted 2023-05-09

【中文标题】如何使用 .load() 使用 jQuery 切换图像？

【英文标题】：How to switch images with jQuery using .load()?

【发布时间】：2014-06-22 23:06:16

【问题描述】：

我正在为 wordPress 插件制作一个按钮。当您单击它时，它应该会更改并在计算机上保存一个 cookie 以供以后使用。 cookie将被保存，如果我刷新页面，正方形变成三角形。

我的问题是，我希望图片在用户点击它时更新，所以它会刷新 #MyDiv -> 检查 cookie MyCookie -> 显示正确的图片（triangle.png 或 square.png）。我已经尝试搜索了几天，但似乎找不到正确的答案。我也尝试过 .html() ，它会更新图片，但是在页面刷新之前我无法点击它。我希望你能并且会帮助我。

干杯 马蒂亚斯

<div id="MyDiv">
    <?php
        if(isset($_COOKIE["MyCookie"]) and $_COOKIE['MyCookie']==1)
            $file = triangle.png
        $id = tr;
        
        else
        
            $file = square.png;
            $id = sq;
        
    ?>

    <a href="#" id="<?php echo "$id" ?>"><img src="<?php echo "$file" ?>"></a>
</div>

<script>
  jQuery(function() 
     jQuery("#tr").click(function(evt) 
        document.cookie="MyCookie=0";
        $('#MyDiv').load(local.href+'#MyDiv').
        evt.preventDefault();
     ),
     jQuery("#sq").click(function(evt) 
        document.cookie="MyCookie=1";
        $('#MyDiv').load(local.href+'#MyDiv').
        evt.preventDefault();
     );
  )
</script>

【参考方案1】：

一种简单的方法是使用cookies.js，它可以让您在 jQuery 中获取 cookie。

这是一个非常简单的示例代码：

HTML：

<div class="container">
    <img src="triangle.png"  class="image" id="triangle" />
    <input type="button" value="Load picture" id="load-picture" />
</div>

jQuery：

/** Wait until jQuery is ready */
jQuery(document).ready(function() 
    jQuery("#load-picture").click(function() 
        var image = jQuery(".image");
        var cookie_content = jQuery.cookie("MyCookie");
        /** Change the picture accordingly */
        if(cookie_content.length >= 1) 
            jQuery(image).attr("src", "square.png").attr("id", "square");
        
        else 
            jQuery(image).attr("src", "triangle.png").attr("id", "triangle");
        
        return false;
    );
);