Jquery 如何切换图标和类名并单击函数_Jquery

Jquery 如何切换图标和类名并单击函数

jquery

Jquery 如何切换图标和类名并单击函数,jquery,Jquery,我搜索这个答案已经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"/&g

我搜索这个答案已经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');
     });
 });

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

$（文档）.ready（函数（）{
$（'.fav'）。单击（函数（）{
var haberid=$（this.attr（'haberid'）；
var habertype=$（this.attr（'habertype'）；
var fav=“fav”；
$.ajax({
类型：“POST”，
url:“http://www.myurl.com/robot_yeni/inc/pages/islem/fav.php",
数据：{id:haberid，type:habertype，fav:fav}，
成功：功能（数据）{
}
});    
$（this.html（“”）；
$（this.attr（'class'，'fav2'）；
});
$（'.fav2'）。单击（函数（）{
var haberid=$（this.attr（'haberid'）；
var habertype=$（this.attr（'habertype'）；
var fav=“fav2”；
$.ajax({
类型：“POST”，
url:“http://www.myurl.com/robot_yeni/inc/pages/islem/fav.php",
数据：{id:haberid，type:habertype，fav:fav}，
成功：功能（数据）{
}
});    
$（this.html（“”）；
$（this.attr（'class'，'fav2'）；
});
});

当我第一次单击时，它从fav1.gif变为fav2.gif，类名从“fav”变为“fav2”，并且$.ajax post可以工作

但当我单击newfav2.gif时，它不会返回（toogle）。没有图标更改，没有类更改，没有ajax帖子

我能做什么？

您无需在同一个div上应用

单击侦听器两次即可获得切换效果。只需应用或删除特定类即可识别当前切换状态
编辑：
  $(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');
     });
 });

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


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

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



脚本：
  $(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');
     });
 });

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

$（文档）.ready（函数（）{
$（'.fav'）。单击（函数（）{
var haberid=$（this.attr（'haberid'）；
var habertype=$（this.attr（'habertype'）；
if（$（this）.hasClass（“fav”））{
var fav=“fav”；
$（this.html（“”）；
$（this.attr（'class'，'fav2'）；
}else if（$（this.hasClass（“fav2”））{
var fav=“fav2”；
$（this.html（“”）；
$（this.attr（'class'，'fav'）；
}
$.ajax({
类型：“POST”，
url:“http://www.myurl.com/robot_yeni/inc/pages/islem/fav.php",
数据：{
id:haberid，
类型：habertype，
fav:fav
},
成功：函数（数据）{}
});
});
});
$（'[class*=fav]'）。单击（函数（）{
var haberid=$（this.attr（'haberid'）；
var habertype=$（this.attr（'habertype'）；
var fav=$（this）.hasClass（'fav'）？'fav2'：'fav'；
$.ajax({
类型：“POST”，
url:“http://www.myurl.com/robot_yeni/inc/pages/islem/fav.php",
数据：{id:haberid，type:habertype，fav:fav}，
成功：函数（数据）{}
});    
$（this.html（“”）；
$（this.attr（'class'，fav））；
});
很抱歉，它可以在演示中使用。但对我的工作不起作用。我没有“fav1”这门课。改名为“fav”。但还是不行。还用优化代码更新了答案。是的，这也是答案。我将学习这一点，以了解要点。非常感谢你。