Javascript 在Jquery和css中切换到两种不同的状态

我有一个Jquery函数，它完成了如下图所示的事情

1.我有一个部门，在一页中列出所有产品和感兴趣的人 可以选择勾号或叉号

2.单击图1中的十字将更改div，如图2所示（即不感兴趣），勾号将仅显示在符号中

3.单击图2中的勾号符号时，应使div如图1所示（即，我感兴趣的）将显示，而叉号将仅显示在符号中

我已经创建了4个独立的图像，并编写了如下的类

$('document').ready(function(){             
        $('.CrossMe').click(function(){
            $(this).prev().attr('class', 'TickMe');             
            $(this).toggleClass('NotInterested');

            $(this).prev().click(function(){
                $(this).next().attr('class', 'CrossMe');
                $(this).toggleClass('Interested');
            });
        });

        $('.TickMe').click(function(){
            $(this).next().attr('class', 'CrossMe');
            $(this).toggleClass('Interested');

            $(this).next().click(function(){
                $(this).next().attr('class', 'TickMe');
                $(this).toggleClass('NotInterested');
            });
        });
    }); 

.CrossMe
{
背景：url（CrossMe.gif）不重复；
光标：指针；
浮动：左；
高度：44px；
宽度：51px；
}
.滴答声
{
背景：url（TickMe.gif）不重复；
光标：指针；
浮动：左；
高度：44px；
宽度：49px；
}
.不感兴趣
{
背景：url（notinterest.gif）不重复；
光标：指针；
浮动：左；
高度：44px；
宽度：241px；
}
.感兴趣
{
背景：url（iamInterest.gif）不重复；
光标：指针；
浮动：左；
高度：44px；
宽度：243px；
}

和Jquery更改类，如下所示

$('document').ready(function(){             
        $('.CrossMe').click(function(){
            $(this).prev().attr('class', 'TickMe');             
            $(this).toggleClass('NotInterested');

            $(this).prev().click(function(){
                $(this).next().attr('class', 'CrossMe');
                $(this).toggleClass('Interested');
            });
        });

        $('.TickMe').click(function(){
            $(this).next().attr('class', 'CrossMe');
            $(this).toggleClass('Interested');

            $(this).next().click(function(){
                $(this).next().attr('class', 'TickMe');
                $(this).toggleClass('NotInterested');
            });
        });
    }); 

和HTML，如下所示

现在我的代码只工作了一次，之后它工作了，但并不像我预期的那样

谁能帮我修一下这个吗

请不要使用ID，因为我将在同一页上显示多个包含产品的div

提前谢谢

我已经在下面粘贴了整个HTML代码

.克罗斯米
{
背景：url（CrossMe.gif）不重复；
光标：指针；
浮动：左；
高度：44px；
宽度：51px；
}
.滴答声
{
背景：url（TickMe.gif）不重复；
光标：指针；
浮动：左；
高度：44px；
宽度：49px；
}
.不感兴趣
{
背景：url（notinterest.gif）不重复；
光标：指针；
浮动：左；
高度：44px；
宽度：241px；
}
.感兴趣
{
背景：url（iamInterest.gif）不重复；
光标：指针；
浮动：左；
高度：44px；
宽度：243px；
}
按钮
{
光标：指针；
}
$（'document'）.ready（函数（）{
$（'.CrossMe'）。单击（函数（）{
$（this.prev（）.attr（'class'，'TickMe'）；
$（this.toggleClass（'notinterest'）；
$（this）.prev（）。单击（函数（））{
$（this.next（）.attr（'class'，'CrossMe'）；
$（this.toggleClass（'interest'）；
});
});
$（'.TickMe'）。单击（函数（）{
$（this.next（）.attr（'class'，'CrossMe'）；
$（this.toggleClass（'interest'）；
$（this）.next（）。单击（function（））{
$（this.prev（）.attr（'class'，'TickMe'）；
$（this.toggleClass（'notinterest'）；
});
});
});     

不确定这是否能解决您的问题，但通过CSS处理这些状态可能更紧凑。我在这里举了一个简单的例子：。我添加了一些注释，您可以在其中为每个状态定义图像，尽管我可能搞错了顺序。不过你明白了。

很抱歉没有检查解决方案，但如果它不起作用，我会尝试改进，试试这个

$('div').click(function() {
    $(this).methodcall();
    $(this).anotherMethodcall();
    $(this).yetAnotherMethodcall();
}); 

我使用

var$pre=$（'pre'）因为这是某种优化。您需要将处理程序附加到

$('document').ready(function(){             
    $('body').on('click', '.CrossMe', function(){
        $(this).prev().attr('class', 'TickMe');             
        $(this).toggleClass('NotInterested');

        $(this).prev().click(function(){
            $(this).next().attr('class', 'CrossMe');
            $(this).toggleClass('Interested');
        });
    });

    $('body').on('click', '.TickMe', function(){
        $(this).next().attr('class', 'CrossMe');
        $(this).toggleClass('Interested');

        $(this).next().click(function(){
            $(this).next().attr('class', 'TickMe');
            $(this).toggleClass('NotInterested');
        });
    });
}); 

但是为什么要调用两次
jQuery
构造函数来最终得到相同的对象呢？最好只调用一次，将其保存到变量中，然后进一步使用它

我经常看到smth，如：

这不是一个好方法
，因为每次单击都会操作DOM对象，因此在运行时需要重新绑定单击事件；您可以尝试使用
.on（）
方法：

未检查，但应能正常工作
 使用以下jQuery脚本：

我已将整个代码粘贴在问题下方。在我看来，
中有一个输入错误，并且类必须是
不感兴趣的
而不是
CrossMe
，不是吗？我想你是说Div是对的。第一个Div将处于这样一种状态，以显示我感兴趣并在Image1Tickme.Gif中划掉我的符号-勾选Image symbol，CrossMe.Gif-划掉图像符号，interest.Gif-我感兴趣图像，notinterest.Gif-我不感兴趣图像啊，对不起-您编辑问题时正在回答。让我知道这是否有帮助：）嘿，大卫，非常感谢。我已经尝试过这种方法。请看，我感兴趣的是显示用户不应该在单击“我感兴趣”时切换回状态。但根据您显示的示例，它正在更改两端的状态，我的意思是，在单击“两个”时，它正在切换状态，但不应该是那样。单击符号单独它应该改变状态我已经在这个URL上传了文件，请检查它不工作，别忘了添加jquery引擎。谢谢啊！很抱歉，我的防火墙阻止了链接，你能使用JSFIDLE吗？非常感谢，这是下面的链接，你介意我问你为什么吗
$('pre').someMethod();
$('pre').someMethod();

$('div').click(function() {
    $(this).methodcall();
    $(this).anotherMethodcall();
    $(this).yetAnotherMethodcall();
}); 

$('document').ready(function(){             
    $('body').on('click', '.CrossMe', function(){
        $(this).prev().attr('class', 'TickMe');             
        $(this).toggleClass('NotInterested');

        $(this).prev().click(function(){
            $(this).next().attr('class', 'CrossMe');
            $(this).toggleClass('Interested');
        });
    });

    $('body').on('click', '.TickMe', function(){
        $(this).next().attr('class', 'CrossMe');
        $(this).toggleClass('Interested');

        $(this).next().click(function(){
            $(this).next().attr('class', 'TickMe');
            $(this).toggleClass('NotInterested');
        });
    });
}); 

$('document').ready(function(){             
    $('.CrossMe').click(function(){
    $(this).toggleClass('TickMe');
    var prevClass = $(this).prev().attr('class');
        if(prevClass=='Interested'){
        $(this).prev().removeClass('Interested').addClass('NotInterested');
        } 
        else{
        $(this).prev().removeClass('NotInterested').addClass('Interested');
        }
    });
    }); ​