添加CSS点击事件，无需重新加载页面

-1

这里是我的脚本，我添加了5个图像并提交button.when我点击提交，如果该图像已访问类将显示刻度线，否则我会显示交叉mark.Now我的疑问是，当我再次点击那些没有重新加载页面的交叉标记的图像时，我必须显示刻度标记而不是交叉标记。可能吗？添加CSS点击事件，无需重新加载页面

$(document).ready(function() { 

    $(".img").click(function() { 
     $(this).addClass("visited"); 
    }); 
}); 

function validate() { 
    $(".img").each(function() { 
     $(this).after($(this).hasClass("visited") ? $(this).next().addClass("fa-check icon") : $(this).next().addClass("fa-times cross")); 
     $(".fa").show(); 

    }); 
    return true; 
}

来源

2016-12-26 moksha

你不能找到这些都是'：visited'，因为这是一个安全风险，许多浏览器删除的支持。 –

检查此以供参考：

$(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; 
 
}

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

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

来源

2016-12-26 06:36:06 Atmahadli

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

$(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"); 
 
    } 
 
    }); 
 
});

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

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

由于安全方面的原因，堆栈片段的输出是沙箱。请检查JSBin。

来源

2016-12-26 06:19:59

添加CSS点击事件，无需重新加载页面

回答

相关问题