Question

我已经搜索了这个答案6个小时但找不到。对不起，如果它是重复的。

我是Jquery的新秀。

我想改变星色，div的类名，当然还要在jquery中执行新类'进程。

这是我的HTML代码：

<div class="fav" haberid="10" habertype="bulunan"><img class="hav" src="http://myurl.com/robot_yeni/inc/media/photos/fav1.gif" border="0" id="10"/></div>

这是我的jquery代码：

  $(document).ready(function(){

     $('.fav').click(function(){
         var haberid = $(this).attr('haberid');
         var habertype = $(this).attr('habertype');
         var fav = "fav";
        $.ajax({
            type:"POST",
            url:"http://www.myurl.com/robot_yeni/inc/pages/islem/fav.php",
            data: {id: haberid, type: habertype, fav: fav}, 
            success:function(data){
            }
        });    
        $(this).html( "<img class=\"hav\" src=\"http://www.myurl.com/robot_yeni/inc/media/photos/fav2.gif\" />");
        $(this).attr('class','fav2');
     });



     $('.fav2').click(function(){
         var haberid = $(this).attr('haberid');
         var habertype = $(this).attr('habertype'); 
         var fav = "fav2";
        $.ajax({
            type:"POST",
            url:"http://www.myurl.com/robot_yeni/inc/pages/islem/fav.php",
            data: {id: haberid, type: habertype, fav: fav}, 
            success:function(data){
            }
        });    
        $(this).html( "<img class=\"hav\" src=\"http://www.myurl.com/robot_yeni/inc/media/photos/fav1.gif\" />");
        $(this).attr('class','fav2');
     });
 });

当我第一次点击时，它从fav1.gif变为fav2.gif，类名从“fav”变为“fav2”，$ .ajax后期工作。

但是当我点击新的fav2.gif时，它无效（toogle）。没有图标更改，没有类更改，没有ajax帖子。

我该怎么办？

Answer 1

您无需在同一个div上应用click侦听器两次以获得切换效果。只需应用或删除特定类即可识别当前的切换状态。

修改

Updated Demo

<强> HTML：

<div class="fav" haberid="10" habertype="bulunan"> <img class="hav" src="http://myurl.com/robot_yeni/inc/media/photos/fav1.gif" border="0" id="10" /> </div>

<强>脚本：

$(document).ready(function () { $('.fav').click(function () { var haberid = $(this).attr('haberid'); var habertype = $(this).attr('habertype'); if ($(this).hasClass("fav")) { var fav = "fav"; $(this).html("<img class=\"hav\" src=\"http://www.myurl.com/robot_yeni/inc/media/photos/fav2.gif\" />"); $(this).attr('class', 'fav2'); } else if ($(this).hasClass("fav2")) { var fav = "fav2"; $(this).html("<img class=\"hav\" src=\"http://www.myurl.com/robot_yeni/inc/media/photos/fav1.gif\" />"); $(this).attr('class', 'fav'); } $.ajax({ type: "POST", url: "http://www.myurl.com/robot_yeni/inc/pages/islem/fav.php", data: { id: haberid, type: habertype, fav: fav }, success: function (data) {} }); }); });

Answer 2

 $('[class*=fav]').click(function(){
     var haberid = $(this).attr('haberid');
     var habertype = $(this).attr('habertype');
     var fav = $(this).hasClass('fav') ? 'fav2' : 'fav';
    $.ajax({
        type:"POST",
        url:"http://www.myurl.com/robot_yeni/inc/pages/islem/fav.php",
        data: {id: haberid, type: habertype, fav: fav}, 
        success:function(data){}
    });    
    $(this).html( "<img class='" + fav + "' src='http://www.myurl.com/robot_yeni/inc/media/photos/" + fav + ".gif' />");
    $(this).attr('class',fav);
 });

如何切换图标和类名并单击单击功能

2 个答案: