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

【问题标题】：How to switch images with jQuery using .load()?如何使用 .load() 使用 jQuery 切换图像？
【发布时间】：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>

【问题讨论】：

标签： php jquery wordpress image

【解决方案1】：

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

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

HTML：

<div class="container">
    <img src="triangle.png" alt="Picture" 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;
    });
});

【讨论】：