Javascript通過錨點調用函數

我想要做類似於FB'Like'風格的點擊，但我在調用錨點鏈接時遇到問題。Javascript通過錨點調用函數

<li id="vote-ico"><a class="unlike" href="javascript:void(0)">Unlike</a></li> 
<li id="vote-ico"><a class="like" href="javascript:void(0)">Like</a></li>

但是下面的JS不工作。

$('.unlike').click(function(){ 
    alert($(this)); 
    $(this).removeClass('unlike').addClass('like', function(){ 
     //action 
    }).text('like'); 
}) 

$('.like').click(function(){ 
    alert($(this)); 
$(this).removeClass('like').addClass('unlike', function(){ 
     //action 
    }).text('unlike'); 
})

它甚至不警惕！有人能幫我嗎？？

來源

2013-07-26 Mouse Tan

您的JS代碼與您的HTML有關嗎？此代碼需要在** HTML準備就緒/呈現後執行** – Ian

請參閱http://jsfiddle.net/WxuVn/ - 您形成警報的方式不正確。 – andrewb

@ andrew-buchan「alert」沒什麼問題。它與綁定 – Ian

$(document).ready(function(){ 
    $('.like').click(function(e){ 
     alert($(this)); 
    $(this).removeClass('like').addClass('unlike', function(){ 
      //action 
     }).text('unlike'); 
    }) 
});

把它放在一個文件準備好，以確保沒有時間問題。 .click處理程序不能連接，直到元素在頁面上。

但是，您可以使用。對是否需要附加的處理程序之前的元素存在

$("#someParent").on("click",".like",function(){alert(''test)});

來源

2013-07-26 05:41:28 TGH

'href =「javascript：void（0）'，這也不會做任何事情，因爲'alert'會保存導航 – Ian

好吧，拿兩個:-) – TGH

嘗試用包裝的document.ready代碼：

<script type="text/javascript"> 
$(document).ready(function() { 
    $('.unlike').click(function(){ 
     alert($(this)); 
     $(this).removeClass('unlike').addClass('like', function(){ 
      //action 
     }).text('like'); 
    }) 

    $('.like').click(function(){ 
     alert($(this)); 
    $(this).removeClass('like').addClass('unlike', function(){ 
      //action 
     }).text('unlike'); 
    }) 
}); 
</script>

來源

2013-07-26 05:43:02 randomizer

在你的代碼綁定點擊事件unlike和like。但你從來沒有unbind呢。當你<a>標籤只刪除元素類的removeClass，但click事件總是與你的element

綁定嘗試<a>標籤這個 -

$(document).ready(function(){  
$('.lnkClick').click(function(){  
    alert($(this).text()); 
    if($(this).text() == "Unlike"){ 
     $(this).text('like'); 
    } 
    else{ 
     $(this).text('Unlike'); 
    }  
}); 
});

Try JSfiddle

使用onclick的 -

HTML -

<li id="vote-ico"><a class="unlike" href="javascript:void(0)" onclick="LikeIt($(this));">Unlike</a></li> 
<li id="vote-ico"><a class="like" href="javascript:void(0)" onclick="LikeIt($(this));">Like</a></li>

jQuery的 -

function LikeIt(Obj){ 
    if(Obj.attr('class') == "unlike"){ 
     Obj.removeClass('unlike').addClass('like', function(){ 
     //action 
     }).text('like'); 
    } 
    else{ 
     Obj.removeClass('like').addClass('unlike', function(){ 
     //action 
     }).text('unlike'); 
    } 
}

Try this with onClick

來源

2013-07-26 05:47:14

<ul> 
<li id="vote-ico"><a name="unlike" class="likeUnlike like" href="javascript:void(0)">Unlike</a></li> 
</ul> 


$(document).ready(function() { 
    $('.likeUnlike').click(function(){ 
    var status=$(this).attr('name'); 
     if(status=='unlike') 
     { 
      var $this= $(this) 
      $this.removeClass('liked').addClass('unlike'); 
      $this.attr('name','like'); 
      $this.text('unliked'); 
     } 
     else{ 
     var $this= $(this) 
      $this.removeClass('unlike').addClass('like'); 
      $this.attr('name','unlike'); 
      $this.text('liked'); 
     } 
    }); 
});

演示：http://jsfiddle.net/zeewon/TKZn6/3/

和關於你的HTML：如果您使用兩個鋰標籤，他們應該有不同的ID。這將符合您的要求，請參閱demo.thanks

來源

2013-07-26 10:25:45

Javascript通過錨點調用函數

回答

相關問題