不要在悬停事件上更新多个div

时间：2016-01-30 06:58:16

标签： javascript jquery html hover

我正在使用html，css＆amp; amp;写一篇简短的调查问卷。 JS。我想问一个问题，然后让用户评分为1-5。

理想情况下，我希望比例尺具有响应性，因此如果你将鼠标悬停在1以上，它就会变黄。如果你将鼠标悬停在2，则会将1和2都变为黄色。如果将鼠标悬停在3以上，则会将前3个框变为黄色。你明白了。

当调查中只有一个问题时，这非常简单，但问题的数量可能是未知的（而且很长）。

我希望我可以使用相同的JS函数和css类，但是当我将鼠标悬停在页面上的1个问题上时，页面上的所有问题都会更新为黄色。这样做的最佳方式是什么，以便每个答案只能单独更新，而不是整个页面？

Heres当前的HTML代码：

            <table>
            <thead>
                <tr>
                    <td>Overall</td>
                    <td></td>
                    <td></td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Question 1</td>
                    <td width="300px">
                        <div class="scale-text">No Rating</div>
                        <div class="scale-1"></div>
                        <div class="scale-2"></div>
                        <div class="scale-3"></div>
                        <div class="scale-4"></div>
                        <div class="scale-5"></div>
                    </td>
                    <td>Comment</td>
                </tr>
                <tr>
                    <td>Question 2</td>
                    <td width="300px">
                        <div class="scale-text"></div>
                        <div class="scale-1"></div>
                        <div class="scale-2"></div>
                        <div class="scale-3"></div>
                        <div class="scale-4"></div>
                        <div class="scale-5"></div>
                    </td>
                    <td>Comment</td>
                </tr>                   
            </tbody>
        <table>

和JS：

<script>
$(function() {
    $('.scale-1').hover(function() {
        $('.scale-1').css('background-color', 'yellow');
        $('.scale-text').html("Strongly Disagree");
    }, function() {
        // on mouseout, reset the background colour
        $('.scale-1').css('background-color', '');
        $('.scale-text').html("No Rating");
    });
});

$(function() {
    $('.scale-2').hover(function() {
        $('.scale-1').css('background-color', 'yellow');
        $('.scale-2').css('background-color', 'yellow');
        $('.scale-text').html("Disagree");
    }, function() {
        // on mouseout, reset the background colour
        $('.scale-1').css('background-color', '');
        $('.scale-2').css('background-color', '');
        $('.scale-text').html("No Rating");
    });
});

$(function() {
    $('.scale-3').hover(function() {
        $('.scale-1').css('background-color', 'yellow');
        $('.scale-2').css('background-color', 'yellow');
        $('.scale-3').css('background-color', 'yellow');
        $('.scale-text').html("Neutral");
    }, function() {
        // on mouseout, reset the background colour
        $('.scale-1').css('background-color', '');
        $('.scale-2').css('background-color', '');
        $('.scale-3').css('background-color', '');
        $('.scale-text').html("No Rating");
    });
});

$(function() {
    $('.scale-4').hover(function() {
        $('.scale-1').css('background-color', 'yellow');
        $('.scale-2').css('background-color', 'yellow');
        $('.scale-3').css('background-color', 'yellow');
        $('.scale-4').css('background-color', 'yellow');
        $('.scale-text').html("Agree");
    }, function() {
        // on mouseout, reset the background colour
        $('.scale-1').css('background-color', '');
        $('.scale-2').css('background-color', '');
        $('.scale-3').css('background-color', '');
        $('.scale-4').css('background-color', '');
        $('.scale-text').html("No Rating");
    });
});

$(function() {
    $('.scale-5').hover(function() {
        $('.scale-1').css('background-color', 'yellow');
        $('.scale-2').css('background-color', 'yellow');
        $('.scale-3').css('background-color', 'yellow');
        $('.scale-4').css('background-color', 'yellow');
        $('.scale-5').css('background-color', 'yellow');
        $('.scale-text').html("Strongly Agree");
    }, function() {
        // on mouseout, reset the background colour
        $('.scale-1').css('background-color', '');
        $('.scale-2').css('background-color', '');
        $('.scale-3').css('background-color', '');
        $('.scale-4').css('background-color', '');
        $('.scale-5').css('background-color', '');
        $('.scale-text').html("No Rating");
    });
});

3 个答案:

答案 0 :(得分：1)

您可以简化代码，如下所示。

将鼠标悬停在某个元素上时，需要使用this（指当前悬停元素）参考找到相关元素

＆＃13;
＆＃13; 
$(function() {
  var scaletext = {
    1: 'SA',
    2: 'A',
    3: 'N',
    4: 'Da',
    5: 'SDa'
  }
  $('.scale').hover(function() {
    var $this = $(this);
    $this.prevAll('.scale').addBack().css('background-color', 'yellow');
    $this.siblings('.scale-text').html(scaletext[$this.data('scale')]);
  }, function() {
    var $this = $(this);
    $this.prevAll('.scale').addBack().css('background-color', '');
    $this.siblings('.scale-text').html("No Rating");
  });
});
＆＃13; 
td > div.scale {
  padding: 5px;
  background-color: lightgrey;
  display: inline-block;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <td>Overall</td>
      <td></td>
      <td></td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Question 1</td>
      <td width="300px">
        <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>Comment</td>
    </tr>
    <tr>
      <td>Question 1</td>
      <td width="300px">
        <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>Comment</td>
    </tr>
    <tr>
      <td>Question 1</td>
      <td width="300px">
        <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>Comment</td>
    </tr>
    <tr>
      <td>Question 1</td>
      <td width="300px">
        <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>Comment</td>
    </tr>
  </tbody>
  <table>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

您可以在jQuery中选择div的所有前一个元素。

这是您的解决方案：

var frases = ["Strongly Disagree", "Disagree", "Neutral", "Agree", "Strongly agree"];
$('.scale').hover(function() {
  $(this).prevAll('.scale').css('background-color', 'yellow').end().css('background-color', 'yellow');
  $(this).prevAll('.scale-text').html(frases[$(this).data('value')-1]);
}, function() {
  // on mouseout, reset the background colour
  $(this).prevAll('.scale').css('background-color', '').end().css('background-color', '');
  $(this).prevAll('.scale-text').html("No Rating");
});

https://jsfiddle.net/qpw7wof1/1/

答案 2 :(得分：1)

只需将#include <stdio.h> int main(void) { int x, y, prime; for (x = 2; x <= 1000; x++) { prime = 1; for (y = 2; y * y <= x; y++) { if (x % y == 0) { prime = 0; break; } } if (prime == 1) { printf("%d\n", x); } } return 0; } 等单个css类添加到所有评级元素中，然后执行以下操作：

scale

<强> Working Fiddle

相关问题
最新问题