Question

我有一个Jquery函数，可以执行下面的图像

中显示的内容

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

2.单击Image1中的十字形，它将改变div，如图2所示（即）不会显示感兴趣，勾号只会出现在符号中

3.单击Image2中的刻度符号它应该使图像1中的div（即）我感兴趣，并且十字架只会出现在符号中

http://i49.tinypic.com/1ibu68.gif

我创建了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();
});

这不是一个好方法

Answer 2

不确定这是否会解决您的问题，但通过CSS处理这些状态可能会更紧凑。我在这里放了一个简单的例子：http://jsfiddle.net/u7336/。我添加了一些注释，你可以为每个状态定义图像，尽管我可能错误地订购了。你明白了。

Answer 3

由于每次点击都会操纵DOM对象，因此点击事件需要在运行时重新绑定;您可以尝试使用.on()方法：

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

未选中，但应该有效!!

Answer 4

使用以下jQuery脚本：

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

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

4 个答案: