Question

这是我的脚本，我添加了5个图像并提交按钮。当我点击提交时，如果该图像已经访问过类，它将显示刻度标记，否则我将显示十字标记。现在我的疑问是当我再次点击这些图像没有重新加载页面的十字标记，我必须显示刻度线而不是十字标记。有可能吗？

<svg id="svg">
</svg>
12px = <span id="out1"></span>

Answer 1

选中此项以供参考：

＆＃13;

$(document).ready(function() {

    $("img").click(function() {
        $(this).toggleClass("visited");
    });
});

function validate() {
    $("img").each(function() {
      $(this).hasClass("visited") ? 
        $(this).next().text("v") :
        $(this).next().text("x");
    });
    return false;
}

＆＃13;

img{
  border:1px #00FF00 solid;
  margin:5px;
  width:100px;
}
.visited{
  border:1px #FF0000 solid;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<img src="http://www.gstatic.com/webp/gallery/1.jpg"/>
<span></span>

<img src="http://www.gstatic.com/webp/gallery/2.jpg"/>
<span></span>

<img src="http://www.gstatic.com/webp/gallery/3.jpg"/>
<span></span>

<br/>

<img src="http://www.gstatic.com/webp/gallery/4.jpg"/>
<span></span>

<img src="http://www.gstatic.com/webp/gallery/5.jpg"/>
<span></span>

<br/>

<button type="button" onclick="validate()">Validate</button>

＆＃13;

Answer 2

您可以使用Cookie或本地存储。使用本地存储，我有这个：

＆＃13;

$(function () {
  localStorage["images"] = localStorage["images"] || "[]";
  var myImages = JSON.parse(localStorage["images"]);
  $(myImages.join(", ")).attr("src", "//placehold.it/150/ccf?text=Visited");
  $("img").click(function () {
    if (typeof localStorage != "undefined") {
      myImages.push("." + this.className);
      localStorage["images"] = JSON.stringify(myImages);
      $(this).attr("src", "//placehold.it/150/ccf?text=Visited");
    }
  });
});

＆＃13;

* {margin: 0; padding: 0; list-style: none;}
ul li {display: inline-block;}

＆＃13;

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<ul>
  <li><img src="//placehold.it/150?text=Unvisited" class="img-1" /></li>
  <li><img src="//placehold.it/150?text=Unvisited" class="img-2" /></li>
  <li><img src="//placehold.it/150?text=Unvisited" class="img-3" /></li>
  <li><img src="//placehold.it/150?text=Unvisited" class="img-4" /></li>
  <li><img src="//placehold.it/150?text=Unvisited" class="img-5" /></li>
</ul>

＆＃13;

出于安全原因，Stack Snippet的输出是沙盒。请检查JSBin。

为click事件添加css而不重新加载页面

2 个答案: