Question

我想做一些类似FB'Like'的点击方式，但我在调用锚链接方面遇到了问题。

<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');
})

它甚至没有警觉！有人能帮助我吗？

Answer 1

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

将其放入文档中，以确保没有时间问题。在元素位于页面上之前，无法附加.click处理程序。

如果需要在元素存在之前附加处理程序

，则可以使用.on

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

Answer 2

尝试使用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>

Answer 3

在您的代码中，您绑定了unlike和like的点击事件。但你永远不会unbind。当removeClass <a>标记它时，它只删除元素类，但click事件始终与您的element

绑定

试试这个 -

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

Try JSfiddle

使用onclick代码的<a> -

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

Answer 4

<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：如果你使用两个li标签，他们应该有不同的id。这符合您的要求，请参阅demo.thanks

Javascript通过锚点调用函数

4 个答案: