javascript - 在 Click 事件中从多个 div 中删除/添加悬停事件

Question

我正在尝试制作一个 5 分制的量表。我希望用户通过从 1(强烈不同意)到 5(强烈同意)的等级中选择一个值来选择他们对陈述的感受。

我使用多个 Div 制作了比例尺。我为体重秤上的每个数字使用 1 个 div。当用户将鼠标悬停在比例尺的一部分上时，所有之前的 div 都将突出显示。例如，用户将鼠标悬停在“3 - 同意”上，div 1、2 和 3 的背景颜色将更新:

    $(function() {

    // set up values and text
    var scaletext = {
        1: 'Strongly Disagree',
        2: 'Disagree',
        3: 'Neutral',
        4: 'Agree',
        5: 'Strongly Agree'
    };

    var colors = ["red", "darkorange", "yellow", "lightgreen", "green"];

    $('.scale').hover(function() {

        var $this = $(this);

        $this.prevAll('.scale').addBack().each(function(i) {
            $(this).css("background", colors[i])
        })

        $this.siblings('.scale-text').html(scaletext[$this.data('scale')]);

    // on mouse off of hover, set everything back to blank
    }, function() {

        var $this = $(this);

        $this.prevAll('.scale').addBack().css('background-color', '');
        $this.siblings('.scale-text').html("No Rating");

});

当用户将鼠标悬停在秤上时，秤会自行重置，所有背景元素都会变回白色。

我想要做的是添加一个点击事件，以便用户点击秤的一部分表示“设置”他们的决定。那时我希望发生的事情:

1. 悬停事件应该在点击秤上的所有 div 时被禁用
2. 如果用户再次点击，它应该重置比例并且悬停事件再次起作用。

我正在使用以下方法来解决 1) 但它不起作用。我单击的 div 已删除其鼠标事件，但如果我将鼠标悬停在任何其他元素上，则事件没有被删除。我也不知道如何解决 2)。也许有比我想的更好的方法。

.click(function() {
        var $this = $(this);

        $this.prevAll('scale').addBack().each(function(i) {
            $(this).unbind("mouseenter mouseleave");
        })

        $this.nextAll('scale').addBack().each(function(i) {
            $(this).unbind("mouseenter mouseleave");
        })

    });

此处为 HTML:

            <table>
            <thead>
                <tr>
                    <td class="section-name">Overall</td>
                    <td></td>
                    <td class="section-total-answered">2 unanswered</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="question">Question1</td>
                    <td class="rating">
                        <div class="scale-text">No Rating</div>
                        <div data-scale="1" class="scale scale-1"></div>
                        <div data-scale="2" class="scale scale-2"></div>
                        <div data-scale="3" class="scale scale-3"></div>
                        <div data-scale="4" class="scale scale-4"></div>
                        <div data-scale="5" class="scale scale-5"></div>
                    </td>
                    <td class="comment"><a class="button" href="#">Comment</a></td>
                </tr>
                <tr>
                    <td class="question">Question2</td>
                    <td class="rating">
                        <div class="scale-text">No Rating</div>
                        <div data-scale="1" class="scale scale-1"></div>
                        <div data-scale="2" class="scale scale-2"></div>
                        <div data-scale="3" class="scale scale-3"></div>
                        <div data-scale="4" class="scale scale-4"></div>
                        <div data-scale="5" class="scale scale-5"></div>
                    </td>
                    <td class="comment"><a class="button" href="#">Comment</a></td>
                </tr>
                <tr>
                    <td class="question">Question3</td>
                    <td class="rating">
                        <div class="scale-text">No Rating</div>
                        <div data-scale="1" class="scale scale-1"></div>
                        <div data-scale="2" class="scale scale-2"></div>
                        <div data-scale="3" class="scale scale-3"></div>
                        <div data-scale="4" class="scale scale-4"></div>
                        <div data-scale="5" class="scale scale-5"></div>
                    </td>
                    <td class="comment"><a class="button" href="#">Comment</a></td>                     
                </tr>               
            </tbody>
            <tfoot>
                <td></td>
                <td></td>
                <td><a class="next-button" href="">Next ></a></td>
            </tfoot>
        </table>

Answer 1

简单的解决方案无需太多更改即可工作:在您的点击处理程序中使用 $this.parent().addClass("clicked"); 然后在您的悬停函数中测试它是否已经被在你做任何事情之前点击:

if(!$this.parent().hasClass("clicked"))
{
  /* your code here */
}

在第二次点击时，您可以使用 $this.parent().removeClass("clicked"); 并且您已恢复并运行