Your variable i is not that it does not work, of course if it works, but for what you want to do let's say it is not the most correct. There is something called closure and scope of variable ( closure and scope ).
As a test mode, start doing this, replace the line alert (acciones[i]); with alert(i); . As you will see it will show you two consecutive alerts with the value of 6 . Now you will ask why it shows the value of 6 if the value that should be expected is the 5 , this is because in the for you have i<=dias.length instead of i<dias.length , correcting the < less than less than the alert will show you the value of 5. (two consecutive alerts). p>
When the loop is completed the variable i remains with the value 5 for all (when you read the closures and scope) you will understand why. Now what if the alert is done in this way alert (acciones[i-1]); (assuming the was corrected less than by less than > in the for), Great and the alert shows .viernesp (you notice that you have it badly written, it lacks a space between Friday and p).
Well, but because it shows twice the alert, the reason is that hover expects two parameters like this: hover( handlerIn, handlerOut ) , if you just pass a callback the hover will take it as handlerIn and handlerOut. I leave the documentation of hover .
The question now is how I use the variable i , because it is not necessary to use the variable i , because at the time when the event of hover is made or triggered by this we have access to the element that triggered the action. Try this code:
for(var i=0;i<dias.length;i++) {
$(dias[i]).hover(function() {
$("p", this).addClass('mostrar');
// o tambien
//$(this).find("p").addClass('mostrar');
}, function() {
$("p", this).removeClass('mostrar');
// o tambien
//$(this).find("p").removeClass('mostrar');
});
}
This is enough so that when you mouse over the p of the list, add the class mostrar and when the mouse comes out, delete the class.
Even so, I do not recommend using a for to assign the hover event, so if instead of that you save the for and the array dias[] y acciones[] in this way:
$(document).ready(function(){
$("ul li").hover(function() {
$("p", this).addClass('mostrar');
// o tambien
//$(this).find("p").addClass('mostrar');
},function() {
$("p", this).removeClass('mostrar');
// o tambien
//$(this).find("p").removeClass('mostrar');
});
});
If you need a list in specifies just give it an id (for example days) and in the selector do $("#dias li").hover(function() { ...
To finish I see that the hover event you only want to assign it to the elements p within an element li , if so the code would be more simplified in this way:
$(document).ready(function(){
$("ul li p").hover(function() {
$(this).addClass('mostrar');
},function() {
$(this).removeClass('mostrar');
});
});
or assuming you give the id days to the list:
$(document).ready(function(){
$("#dias li p").hover(function() {
$(this).addClass('mostrar');
},function() {
$(this).removeClass('mostrar');
});
});
I leave you a complete example that when you pass the mouse change the color and
the cursor of the paragraph within the list:
$(document).ready(function(){
$("#dias li p").hover(function() {
$(this).addClass('mostrar');
},function() {
$(this).removeClass('mostrar');
});
});
.mostrar{
color: red;
cursor: pointer;
}
<html>
<head></head>
<body>
<ul id="dias">
<li><p>Lunes</p></li>
<li><p>Martes</p></li>
<li><p>Miercoles</p></li>
<li><p>Jueves</p></li>
<li><p>Viernes</p></li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>