jQuery hover only work with the first loop in for loop

Question

My jQuery can change div height when it hover but when I create two divs with for loop it can only work with first loop.

I have JavaScript code that include jQuery.

It gets string from var result and create 1 div for image players and 1 div for stats of players.

I use loop to create player that when I hover the image it can active jQuery hover change stats div height from 0 to 20vw but it only working on first loop. I think it is because the id but the second loop id work fine with other jQuery.

The hover below:

var result =[
    2,
    "name:Tom;bc:67;lp:77;fn:37;ic:65;ag:45;sp:56;st:54;pc:66", 
    "name:Thomas;bc:70;lp:44;fn:70;ic:44;ag:60;sp:70;st:30;pc:30"
];

for (var a = 1; a < result[0] + 1; a++){

  var players = result[a].split(";");
  var playername = players[0].split(":");
  var element = document.createElement("div");
  var elementc = document.createElement("div");
  var elements = document.createElement("div");
  
  for (var s = 1; s < 8; s++){
    var ps = document.createElement("p");
    ps.innerHTML = players[s] + "   ";
    elements.appendChild(ps);
  }

  element.id = playername[1];
  elementc.id = playername[1] + "id";
  elements.id = playername[1] + "stats";
  elementc.appendChild(element);
  document.getElementById('manage').appendChild(elementc);
  document.getElementById('manage').appendChild(elements);

  document.getElementById(playername[1] + "id").style.position = "Relative";
  document.getElementById(playername[1] + "id").style.position = "Relative";
  document.getElementById(playername[1] + "id").style.width = "87vw";
  document.getElementById(playername[1] + "id").style.margin = "0.5vw";
  document.getElementById(playername[1] + "id").style.height = "10vw";
  document.getElementById(playername[1] + "id").style.border = "1vw solid cyan";
  document.getElementById(playername[1]).style.position = "Relative";
  document.getElementById(playername[1]).style.cssFloat = "left";
  document.getElementById(playername[1]).style.width = "10vw";
  document.getElementById(playername[1]).style.height = "10vw";
  document.getElementById(playername[1]).style.backgroundImage = "url(Players/" + playername[1] + ".jpg";
  document.getElementById(playername[1]).style.backgroundSize = "cover";
  document.getElementById(playername[1] + "stats").style.position = "Relative";
  document.getElementById(playername[1] + "stats").style.backgroundColor = "lightgrey";
  document.getElementById(playername[1] + "stats").style.overflowY = "scroll";
  document.getElementById(playername[1] + "stats").style.width = "87vw";
  document.getElementById(playername[1] + "stats").style.height = "20";
  
  $("#" + playername[1] + "stats")
    .children().css("background", "linear-gradient(to right,#0D7377 50%, #ffffff 50%)");

  $("#" + playername[1] + "stats")
    .children().css("width", "fit-content");

  $("#" + playername[1] + "stats")
    .children().css("float", "left");

  $("#" + playername[1] + "stats")
    .children().css("margin", "2vw");

  $("#manage").children().css("margin-top", "30vw");
  //The hover here

  $("#" + playername[1] + "id").hover(
    function(){
      $("#" + playername[1] + "stats").animate({'height': '20vw'}, 'slow');
    },
    function(){
      $("#" + playername[1] + "stats").animate({'height': '0vw'}, 'slow');
    }
  );
}

Death-is-the-real-truth · Accepted Answer · 2023-02-07 09:37:30Z

Give them a common class and then use that class directly for the hover event. (Single statement)

Working snippet:

var result = [
  2,
  "name:Tom;bc:67;lp:77;fn:37;ic:65;ag:45;sp:56;st:54;pc:66",
  "name:Thomas;bc:70;lp:44;fn:70;ic:44;ag:60;sp:70;st:30;pc:30"
];

for (var a = 1; a < result[0] + 1; a++) {

  var players = result[a].split(";");
  var playername = players[0].split(":");
  var element = document.createElement("div");
  var elementc = document.createElement("div");
  var elements = document.createElement("div");

  for (var s = 1; s < 8; s++) {
    var ps = document.createElement("p");
    ps.innerHTML = players[s] + "   ";
    elements.appendChild(ps);
  }

  element.id = playername[1];
  elementc.id = playername[1] + "id";
  elementc.classList.add("player");
  elements.id = playername[1] + "stats";
  elements.classList.add("player-stats");
  elementc.appendChild(element);
  document.getElementById('manage').appendChild(elementc);
  document.getElementById('manage').appendChild(elements);

  document.getElementById(playername[1] + "id").style.position = "Relative";
  document.getElementById(playername[1] + "id").style.position = "Relative";
  document.getElementById(playername[1] + "id").style.width = "87vw";
  document.getElementById(playername[1] + "id").style.margin = "0.5vw";
  document.getElementById(playername[1] + "id").style.height = "10vw";
  document.getElementById(playername[1] + "id").style.border = "1vw solid cyan";
  document.getElementById(playername[1]).style.position = "Relative";
  document.getElementById(playername[1]).style.cssFloat = "left";
  document.getElementById(playername[1]).style.width = "10vw";
  document.getElementById(playername[1]).style.height = "10vw";
  document.getElementById(playername[1]).style.backgroundImage = "url(Players/" + playername[1] + ".jpg";
  document.getElementById(playername[1]).style.backgroundSize = "cover";
  document.getElementById(playername[1] + "stats").style.position = "Relative";
  document.getElementById(playername[1] + "stats").style.backgroundColor = "lightgrey";
  document.getElementById(playername[1] + "stats").style.overflowY = "scroll";
  document.getElementById(playername[1] + "stats").style.width = "87vw";
  document.getElementById(playername[1] + "stats").style.height = "20";

  $("#" + playername[1] + "stats")
    .children().css("background", "linear-gradient(to right,#0D7377 50%, #ffffff 50%)");

  $("#" + playername[1] + "stats")
    .children().css("width", "fit-content");

  $("#" + playername[1] + "stats")
    .children().css("float", "left");

  $("#" + playername[1] + "stats")
    .children().css("margin", "2vw");

  $("#manage").children().css("margin-top", "30vw");
  //The hover here
}
$(".player").hover(
  function() {
    $(this).next('.player-stats').animate({
      'height': '20vw'
    }, 'slow');
  },
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="manage"></div>

Collectives™ on Stack Overflow

jQuery hover only work with the first loop in for loop

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related