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

这不是一个好方法