在Click事件

Question

我试图制作5分制。我希望用户通过在比例尺上选择1（非常不同意）到5（非常同意）的值来选择他们对某个陈述的看法。

我使用多个Div制作了比例尺。我在比例尺上为每个数字使用1个div。当用户将鼠标悬停在比例尺的一部分上时，所有先前的div都将突出显示。例如，用户将鼠标悬停在＆＃34; 3 - 同意＆＃34;，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");

});

当用户徘徊在比例尺上时，比例会自动重置，所有背景元素都会变回白色。

我尝试做的是添加点击事件，以便用户点击比例的一部分表示＆＃34;设置＆＃34;他们的决定。那时我想发生什么：

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 here：

            <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");，然后重新启动并运行

Answer 2

我想你可以做到这一点，我想：

首先分开保持悬停功能：

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

Answer 3

我使用了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");
        }

    });