从单击事件的多个div中移除/添加悬停事件

Question

我在试着做个5分的评分。我希望用户通过在比例上从1(强烈不同意)到5(强烈同意)选择一个值来选择他们对一条语句的感觉。

我用多个除法来制作刻度。我用一个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. 如果用户再次单击，它应该重置规模和悬停事件再次工作。

我在玩下面的游戏来解决问题，但它不起作用。我单击的div已经删除了它的鼠标事件，但是如果我悬停在任何其他元素上，事件就没有被删除。我也想不出怎么解决这个问题。也许还有比我想的更好的方法。

.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

我使用了Nic和Dvenkatsagars的组合来获得解决方案：

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

        var $this = $(this);

        if(!$this.parent().hasClass("clicked"))
        {
            $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);

        if(!$this.parent().hasClass("clicked"))
        {
            $this.prevAll('.scale').addBack().css('background-color', '');
            $this.siblings('.scale-text').html("No Rating");
        }

    // once a value has been clicked be sure to stop the mouse off event so
    // that we dont lose the users selected value
    }).click(function() {
        var $this = $(this);

        if(!$this.parent().hasClass("clicked"))
        {
            $this.parent().addClass("clicked");
        } else {
            $this.parent().removeClass("clicked");
        }

    });

Answer 2

简单的解决方案应该可以工作，而不必更改太多:在单击处理程序中使用$this.parent().addClass("clicked");，然后在悬停函数中测试它是否已经被单击，然后再做任何操作：

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

在第二次单击中，您可以使用$this.parent().removeClass("clicked");并重新启动并运行

Answer 3

我想你能做到的，我猜：

首先，将悬停功能分开保持：

var HoverOn = function(e){ ... }
var HoverOff = function(e) { ... }

然后你就像这样盘旋：

$(".scale").on("hover",HoverOn,HoverOff);

对于点击，我认为这可能会有帮助(只是给出一个想法)：

var count = 0;
$('.scale').click(function(e) {
    count++;
    var $this = $(this);          
    if(count%2 == 0){
      $this.prevAll('.scale').addBack().css('background-color', '');
      $this.siblings('.scale-text').html("No Rating");
      $this.parent().children().on("hover",HoverOn,HoverOff);
    }else{
       $this.parent().children().off("hover");  
    }
});

所以这里发生的是，如果你点击.slide，数一下点击的次数。这将允许您控制幻灯片的方式，如果您单击奇数次，您可以关闭悬停，否则做一些事情。

更新:正如@Nic所建议的，使用父类上的类来检查幻灯片部分是否被单击更合适。

 $('.scale').click(function(e) {
    var $this = $(this);          
    if(!$this.parent().hasClass('clicked')){
      $this.parent().addClass('clicked');

      ...

      /* Some code to reset the scale */

      ...

      $this.parent().children().on("hover",HoverOn,HoverOff);
    }else{
       $this.parent().removeClass('clicked');
       $this.parent().children().off("hover");  
    }
});