2

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

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

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

3.单击 Image2 中的勾号 它应该使 div 与 Image 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>
4

4 回答 4

2

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

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

这不是一个好方法

于 2012-08-17T05:19:44.797 回答
1

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

于 2012-08-17T05:19:03.370 回答
1

由于每次点击都会操作 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');
        });
    });
});

没有检查，但应该工作！

于 2012-08-17T05:24:18.840 回答
1

使用下面的 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');
        }
    });
    }); ​
于 2012-08-17T05:27:52.467 回答