我有一个包含三个主题标签网址的页面:
<a href="#Link1">Some Text 1</a>
<a href="#Link2">Some Text 2</a>
<a href="#Link3">Some Text 3</a>
一旦用户点击了所有三个,我需要将它们重定向到另一个 URL。
有没有人有一个例子,或者知道我可以做到这一点的方法?
我有一个包含三个主题标签网址的页面:
<a href="#Link1">Some Text 1</a>
<a href="#Link2">Some Text 2</a>
<a href="#Link3">Some Text 3</a>
一旦用户点击了所有三个,我需要将它们重定向到另一个 URL。
有没有人有一个例子,或者知道我可以做到这一点的方法?
试试这个:
window.onload = function () {
var anchors, clicked_count, clicked, i, cur_anchor, my_anchor_id;
anchors = document.getElementsByTagName("a");
clicked_count = 0;
clicked = {};
for (i = 0; i < anchors.length; i++) {
cur_anchor = anchors[i];
cur_anchor.setAttribute("data-anchor-id", i);
cur_anchor.onclick = function (e) {
e = e || window.event;
e.preventDefault();
my_anchor_id = this.getAttribute("data-anchor-id");
if (!(my_anchor_id in clicked)) {
clicked[my_anchor_id] = null;
if (++clicked_count === anchors.length) {
console.log("WOULD BE REDIRECTING");
//window.location.href = "NEW URL";
}
}
};
}
};
演示:http: //jsfiddle.net/hCRtD/1/
为了证明演示有效,请在单击最后一个所需的锚点之前多次单击一些锚点。它不会在总共点击 3 次后完成(我原来的解决方案就是这样有缺陷的),而是会等到每个点击至少一次。
它为所有标签设置一个特殊属性<a>
,唯一标识它们。显然,id
可以使用 an ,但您没有包含它,这样做很容易。
然后,当一个锚点被点击时(仅是第一次),它的唯一标识符被添加到一个集合中(clicked
)。
当每次第一次单击锚点时递增的计数器 ( clicked_count
) 达到第一次找到的锚点总数时,一切都已完成。
添加html类:
<a href="#Link1" class="redirect">Some Text 1</a>
<a href="#Link2" class="redirect">Some Text 2</a>
<a href="#Link3" class="redirect">Some Text 3</a>
并尝试使用 javascript:
function catchAnchors(){
var links = document.getElementsByClassName("redirect");//get your links
for(var i=links.length-1;i>=0;i--){
if(!links[i].wasClick)return;//if never clicked return;
}
location.href = "your url";//redirect
}
var links = document.getElementsByClassName("redirect");//get your links
for(var i=links.length-1;i>=0;i--){
links[i].onclick = function(){
this.wasClick = true;//set mark onclick event
catchAnchors();//check links
}
}