不要更新悬停事件的多个div [英] Dont update multiple divs on hover events
本文介绍了不要更新悬停事件的多个div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用html，css& JS。我想问一个问题，然后让用户以1-5的比例进行评分。
理想情况下，我希望量表能够快速响应，所以如果你将鼠标悬停在1以上，它就会变成黄色。如果将鼠标悬停在2上，它会将1和2都变成黄色。如果将鼠标悬停在3以上，则前3个框会变成黄色。你明白了。
在调查中只有一个问题时，这非常简单，但问题的数量可能未知（且冗长）。
我希望我可以使用相同的JS函数和css类，但是当我将鼠标悬停在页面上的问题上时，页面上的所有问题都会更新为变成黄色。这样做的最好方法是让每个答案只能单独更新，而不是整个页面？
下面是HTML代码：
< table>
< thead>
< tr>
< td>整体< / td>
< td>< / td>
< td>< / td>
< / tr>
< / thead>
< tbody>
< tr>
< td>问题1< / 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>评论< / td>
< / tr>
< tr>
< td>问题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>评论< / td>
< / tr>
< / tbody>
< table>
和JS：
<脚本>
$（function（）{
$（'。scale-1'）。hover（function（）{
$（'。scale-1'）。css（'background-color '，'yellow'）;
$（'。scale-text'）。html（Strongly Disagree）;
}，function（）{
//在mouseout上，重置背景颜色
$（'。scale-1'）。css（'background-color'，''）;
$（'。scale-text'）。html（No Rating）;
}）;
}）;
$ b $（函数（）{
$（'。scale-2'）。hover（函数（）{
$（'。scale-1'）。css 'background-color'，'yellow'）;
$（'。scale-2'）。css（'background-color'，'yellow'）;
$（'。scale-text' ）.html（不同意）;
}，function（）{
//在鼠标移出时，重置背景颜色
$（'。scale-1'）。css（'background 'color'，''）;
$（'。scale-2'）。css（'background-color'，''）;
$（'。scale-text'）。html 无评级）;
}）;
}）;
$ b $（函数（）{
$（'。scale-3'）。hover（函数（）{
$（'。scale-1'）。css 'background-color'，'yellow'）;
$（'。scale-2'）。css（'background-color'，'yellow'）;
$（'。scale-3' ）.css（'background-color'，'yellow'）;
$（'。scale-text'）。html（Neutral）;
}，function（）{
//在鼠标移出时，重置背景颜色
$（'。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'）;
$（'。 （同意）;
}，function（）{
//在mouseout上，重置背景颜色
$（'。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）;
}）;
}）;
$ b $（函数（）{
$（'。scale-5'）。hover（函数（）{
$（'。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（Strongly Agree）;
}，function（） {
//在鼠标移出时重置背景颜色
$（'。scale-1'）。css（'background-color'，''）;
$（'。scale- 2'）。css（'background-color'，''）;
$（'。scale-3'）。css（'background-color'，''）;
$（'。 （'background-color'，''）;
$（'。scale-5'）。css（'background-color'，''）;
$（'scale-4' '.scale-text'）。html（No Rating）;
}）;
}）;
解决方案
您可以简化代码，如下所示。
当您将鼠标悬停在某个元素上时，您需要使用 this 来查找相关元素（它指的是当前悬停元素）引用
$（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）;}）;}）;
td> div.scale {padding：5px; background-color：lightgrey; display：inline-block;}
< script src = https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><table> < THEAD> < TR> < TD>整体< / TD> < TD>< / TD> < TD>< / TD> < / TR> < / THEAD> < TBODY> < TR> < td>问题1< / td> < td width =300px> < div class =scale-text>无评分< / div> < div data-scale =1class =scale scale-1>< / div> < div data-scale =2class =scale scale-2>< / div> < div data-scale =3class =scale scale-3>< / div> < div data-scale =4class =scale scale-4>< / div> < div data-scale =5class =scale scale-5>< / div> < / TD> < TD>注释< / TD> < / TR> < TR> < td>问题1< / td> < td width =300px> < div class =scale-text>无评分< / div> < div data-scale =1class =scale scale-1>< / div> < div data-scale =2class =scale scale-2>< / div> < div data-scale =3class =scale scale-3>< / div> < div data-scale =4class =scale scale-4>< / div> < div data-scale =5class =scale scale-5>< / div> < / TD> < TD>注释< / TD> < / TR> < TR> < td>问题1< / td> < td width =300px> < div class =scale-text>无评分< / div> < div data-scale =1class =scale scale-1>< / div> < div data-scale =2class =scale scale-2>< / div> < div data-scale =3class =scale scale-3>< / div> < div data-scale =4class =scale scale-4>< / div> < div data-scale =5class =scale scale-5>< / div> < / TD> < TD>注释< / TD> < / TR> < TR> < td>问题1< / td> < td width =300px> < div class =scale-text>无评分< / div> < div data-scale =1class =scale scale-1>< / div> < div data-scale =2class =scale scale-2>< / div> < div data-scale =3class =scale scale-3>< / div> < div data-scale =4class =scale scale-4>< / div> < div data-scale =5class =scale scale-5>< / div> < / TD> < TD>注释< / TD> < / TR> < / tbody的> < table>
Im writing a short survey using html, css & js. I want to ask a question, and then let the user rate on a scale of 1-5.
Ideally I wanted the scale to be responsive, so if you hover over 1 it turns yellow. If you hover of 2, it turns both 1 and 2 yellow. If you hover over 3, it turns the first 3 boxes yellow. You get the idea.
This works pretty simply when there is only one question in the survey, but the amount of questions is likely to be unknown (and lengthy).
I was hoping I could just use the same JS function and css classes but when I hover over a 1 on a question on the page ALL the questions on the page update to be yellow. What's the best way of doing this so that each answer will only update individually and not the entire page?
Heres current HTML code:
<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>
And 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");
});
});
解决方案
You can simplify the code as below.
When you hover over an element, you need to find the related element by using the this(which refers to the currently hovering element) reference
$(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");
});
});
td > div.scale {
padding: 5px;
background-color: lightgrey;
display: inline-block;
}
<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>
这篇关于不要更新悬停事件的多个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
