javascript - son - innerhtml
No actualice varios divs en eventos de desplazamiento (3)
Puede seleccionar todos los elementos previos de un div en jQuery.
Aquí está tu solución:
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");
});
Estoy escribiendo una breve encuesta usando html, css y js. Quiero hacer una pregunta, y luego dejar que el usuario califique en una escala de 1-5.
Idealmente, quería que la balanza respondiera, por lo que si pasa el cursor sobre 1, se vuelve amarillo. Si coloca el cursor sobre 2, cambia tanto el 1 como el 2 a amarillo. Si pasa el cursor sobre 3, convierte las primeras 3 casillas amarillas. Entiendes la idea.
Esto funciona bastante simple cuando solo hay una pregunta en la encuesta, pero es probable que la cantidad de preguntas sea desconocida (y larga).
Tenía la esperanza de poder usar la misma función JS y las clases CSS, pero cuando sobrevivo un 1 en una pregunta en la página TODAS las preguntas en la página se actualizan en amarillo. ¿Cuál es la mejor manera de hacerlo para que cada respuesta solo se actualice individualmente y no toda la página?
Heres código HTML actual:
<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>
Y 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");
});
});
Puede simplificar el código de la siguiente manera.
Cuando pasa el mouse sobre un elemento, necesita encontrar el elemento relacionado utilizando la referencia this (que hace referencia al elemento que se encuentra actualmente cerca).
$(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>
Simplemente agregue una clase CSS única como scale a todos los elementos de clasificación y haga lo siguiente:
$(function() {
$(''.scale'').hover(function() {
var $previous = $(this);
while ($previous.length && $previous.hasClass(''scale'')) {
$previous.css(''background-color'', ''yellow'');
$previous = $previous.prev();
}
}, function() {
var $previous = $(this);
while ($previous.length && $previous.hasClass(''scale'')) {
$previous.css(''background-color'', '''');
$previous = $previous.prev();
}
})
});