2016-09-07 62 views
2

我有這樣的DOM。當我第一次在設備上點擊錨標記時,我想禁用錨標記。第二次點擊它會去的網址,很好的答案,必須讚賞。禁用錨標記首先點擊設備,需要再次點擊

$(function(){ 
 

 
var oreintedWidth = $(window).width(); 
 
if (oreintedWidth < 1200) { 
 
var $clickLinks = $('.social').find('ul').children('li'); 
 
    $($clickLinks).on('click', 'a', function(events){ 
 

 
     $($clickLinks).each(function(index, element) { 
 
     $(this).closest('li').removeClass('selected'); 
 
     }); 
 
\t \t 
 
     $(this).closest('li').addClass('selected'); 
 
     if($(this).closest('li').hasClass('selected')){ 
 
     events.preventDefault(); 
 
     }else {} \t \t 
 
    }); 
 
} 
 

 
});
<div class="social"> 
 
\t <ul> 
 
    \t <li><a href="about.html" target="_blank">one</a></li> 
 
     <li><a href="about.html" target="_blank">two</a></li> 
 
     <li><a href="about.html" target="_blank">three</a></li> 
 
    </ul><!-- /.ul --> 
 
</div>

+0

http://meta.stackoverflow.com/questions/334673/edit-clearly-violating-my-answer-voted-approve-by -reviewer和http://meta.stackoverflow.com/questions/334675/code-snippets-are-a-pest – Will

回答

0

是的,我明白了。這是我所期待的,感謝您的支持

$(function(){ 
 

 
    var oreintedWidth = $(window).width(); 
 
    if (oreintedWidth < 1200) { 
 
    var $clickLinks = $('.social').find('ul').children('li'); 
 
    \t $($clickLinks).find('a').attr('onClick','return false'); 
 
    \t $($clickLinks).on('click', 'a', function(events){ 
 
    \t \t var nearBy = $(this).closest('li'); 
 
    \t \t 
 
    \t \t $($clickLinks).each(function(index, element) { 
 
       $(this).removeClass('selected'); 
 
    \t   $(this).find('a').attr('onClick','return false'); 
 
      }); 
 
    \t \t 
 
    \t \t nearBy.addClass('selected'); 
 
    \t \t if(nearBy.hasClass('selected')) 
 
    \t \t { 
 
    \t \t \t $(this).attr('onClick',"return true"); 
 
    \t \t \t 
 
    \t \t } 
 
    \t \t else { 
 
    \t \t \t $(this).attr('onClick','return false'); 
 
    \t \t \t 
 
    \t \t } 
 
    \t \t 
 
    \t \t 
 
    \t }); 
 
    } 
 
    });

2

試試這個,這是你want.I剛剛添加的警報,添加您的代碼,而不是說。希望這會對你有所幫助。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
\t 
 
</head> 
 

 
<style type="text/css"> 
 
a{ 
 
\t text-decoration: none; 
 
} 
 
</style> 
 

 
<body> 
 
\t 
 

 
<a href="" class="mylink">MY LINK, I WILL NOT WORK IN THE FIRST CLICK</a> 
 

 
</body> 
 

 
<script type="text/javascript"> 
 
$(document).ready(function(){ 
 
    \t var theclick = 0; 
 
    \t $(".mylink").click(function(event){ 
 
    \t \t if(theclick == 0) 
 
    \t \t { 
 
    \t \t \t theclick = theclick + 1; 
 
    \t \t \t event.preventDefault(); 
 
    \t \t } 
 
    \t \t else 
 
    \t \t { 
 
      //do your code here 
 
    \t \t \t alert("Yeh, this is the second time, now I'm working"); 
 
    \t \t } 
 
    \t }); 
 
}); 
 

 

 
</script> 
 
</html>

複製粘貼,並嘗試在你的瀏覽器。

否則,您希望在第一次點擊時使用css顯示禁用功能。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
\t 
 
</head> 
 

 
<style type="text/css"> 
 
a.mylink{ 
 
\t text-decoration: none; 
 
} 
 

 
.adisable{ 
 
\t color:gray; 
 
\t opacity: 0.7; 
 
} 
 

 
</style> 
 

 
<body> 
 
\t 
 

 
<a href="" target="_blank" class="mylink">MY LINK, I WILL NOT WORK IN THE FIRST CLICK</a> 
 

 
</body> 
 

 
<script type="text/javascript"> 
 
$(document).ready(function(){ 
 
    \t var theclick = 0; 
 
    \t $(".mylink").click(function(event){ 
 
    \t \t if(theclick == 0) 
 
    \t \t { 
 
    \t \t \t theclick = theclick +1; 
 
    \t \t \t $(this).addClass("adisable"); 
 
    \t \t \t event.preventDefault(); 
 
    \t \t } 
 
    \t \t else 
 
    \t \t { 
 
    \t \t \t alert("Yeh, this is the second time, no I wil work"); 
 
    \t \t } 
 
    \t }); 
 
}); 
 

 

 
</script> 
 
</html>

+0

感謝您的幫助。但這不是我想要的 –

+0

然後你想要什麼 –

+0

嘗試更新的第二個答案 –

1

您可以使用一個()的方法來跟蹤第一次點擊,然後你可以改變屬性或類。在其他點擊事件你可以檢查屬性或類是否設置?和基於類別或屬性傳播完成事件設置

$(function(){ 
 

 
var oreintedWidth = $(window).width(); 
 
if (oreintedWidth < 1200) { 
 
var $clickLinks = $('.social > ul> li > a '); 
 
\t $($clickLinks).one('click', function(e){ 
 
     e.preventDefault(); 
 
     $(this).attr('first-clicked','1'); 
 
     return false; 
 
\t }); 
 
    
 
    $($clickLinks).on('click', function(e){ 
 
     
 
    return $(this).attr('first-clicked')=='1'; 
 
\t }); 
 
} 
 

 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="social"> 
 
\t <ul> 
 
    \t <li><a href="about.html" target="_blank" first-clicked='0'>one</a></li> 
 
     <li><a href="about.html" target="_blank" first-clicked='0'>two</a></li> 
 
     <li><a href="about.html" target="_blank" first-clicked='0'>three</a></li> 
 
    </ul><!-- /.ul --> 
 
</div>

+0

這很好。但是當我點擊一個添加屬性'第一次點擊'接下來,我點擊兩個也得到了第一次點擊,並且我達到了一個那是去鏈接。那不是我想要的。我得到了答案,我發佈在頂部 –