Question

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

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

干杯的Mathias

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

Answer 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;
    });
});

如何使用.load（）使用jQuery切换图像？

1 个答案: