javascript - Jquery和css中两种不同状态的切换

Question

我有一个 Jquery 函数，它执行如下图所示的操作

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

2.单击图片 1 中的叉号时，它会更改图片 2 中的 div(即)将显示“不感兴趣”，勾号将仅出现在符号中

3.单击 Image2 中的刻度符号时，它应该使 div 与图像 1 中的一样(即)我感兴趣将被显示并且交叉将仅出现在符号中

我创建了 4 个单独的图像并编写如下类

.CrossMe
    {
        background : url(CrossMe.gif) no-repeat;
        cursor     : pointer;
        float      : left;
        height     : 44px;
        width      : 51px;
    }

    .TickMe
    {
        background : url(TickMe.gif) no-repeat;
        cursor     : pointer;
        float      : left;
        height     : 44px;
        width      : 49px;
    }

    .NotInterested
    {
        background : url(NotInterested.gif) no-repeat;
        cursor     : pointer;
        float      : left;
        height     : 44px;
        width      : 241px;
    }

    .Interested
    {
        background : url(IamInterested.gif) no-repeat;
        cursor     : pointer;
        float      : left;
        height     : 44px;
        width      : 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

<pre>
<div class="Interested"></div>
<div class="CrossMe"></div>
</pre>

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

谁能帮我解决这个问题

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

提前致谢

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

<pre>
       <style>
        .CrossMe
        {
            background : url(CrossMe.gif) no-repeat;
            cursor       :  pointer;
            float            : left;
            height       : 44px;
            width            : 51px;
        }

        .TickMe
        {
            background : url(TickMe.gif) no-repeat;
            cursor       :  pointer;
            float            : left;
            height       : 44px;
            width            : 49px;
        }

        .NotInterested
        {
            background : url(NotInterested.gif) no-repeat;
            cursor       :  pointer;
            float            : left;
            height       : 44px;
            width            : 241px;
        }

        .Interested
        {
            background : url(IamInterested.gif) no-repeat;
            cursor       :  pointer;
            float            : left;
            height       : 44px;
            width            : 243px;
        }

        .Button
        {
        cursor  :   pointer;
        }
        </style>
        <script>

        $('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).prev().attr('class', 'TickMe');
                        $(this).toggleClass('NotInterested');
                    });
            });
        });     

        </script>

      <div class="Interested"></div>
      <div class="CrossMe"></div>
</pre>

Answer 1

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

$('document').ready(function(){
    var $pre = $('pre');
    $pre.delegate('div.CrossMe', 'click', function(){
        $(this).attr('class', 'TickMe') 
             .prev().attr('class', 'NotInterested');
    });

    $pre.delegate('div.TickMe', 'click', function(){
        $(this).attr('class', 'CrossMe')
             .prev().attr('class', 'Interested');
    });
}); 

我使用 var $pre = $('pre');因为它是某种优化。您需要将处理程序附加到 <pre> DOM 对象 2 次。你可以这样做:

$('pre').someMethod();
$('pre').someMethod();

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

我经常看到类似的东西:

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

这不是一个好方法