Javascript通过锚点调用函数

Javascript invoking function via anchor

本文关键字：调用 函数 Javascript      更新时间：2023-09-26

我想做一些类似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');
})

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

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

$(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)});

在代码中绑定unlike和like的点击事件。但你从来没有unbind。当你标记<a>的removeClass时，它只删除元素类，但点击事件总是与你的element 绑定

试试这个-

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

试试JSfiddle

使用<a>标签的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');
    }
}

使用onClick 试试这个

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

相关文章：