javascript - 通过锚点调用 Javascript 函数

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 包装你的代码：

<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 2

unlike在您的代码中，您绑定了and的点击事件like。但你从来没有unbind。当您标记时removeClass，<a>它仅删除元素类，但单击事件始终与您的绑定element

尝试这个-

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

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

用 onClick 试试这个

Answer 3

$(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 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 。这将符合您的要求，请参阅演示。谢谢