添加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點擊事件，無需重新加載頁面

回答

相關問題