I want to write a jquery that by a mouseover change the contain of the first <ul>, the first <ul> by default contains 111 and when the mouse is over aaa appears 111, bbb appears 222, ccc appears 333

const firstul = document.getElementById('span_Lan');
const boxLi = document.getElementById('ul_box').children;
for (let i = 0; i < boxLi.length; i  ) {
  boxLi[i].addEventListener('mouseover', () => {
    firstul.value  = boxLi[i].textContent;
    if (boxLi[i].id == "lnk1") firstul.value  = "111";
    else if (boxLi[i].id == "lnk2") firstul.value  = "222";
    else if (boxLi[i].id == "lnk2") firstul.value  = "333";
  })
}

<div>
  <ul>
    <li id="li_box"> <span id="span_Lan"></span></li>
  </ul>
  <ul id="ul_box">
    <li><a id="lnk1" >aaa</a></li>
    <li><a id="lnk2" >bbb</a></li>
    <li><a id="lnk3" >ccc</a></li>
  </ul>
</div>

CodePudding user response：

You said using jQuery , so no need to loops and addEventListener , all you need is just specifying displayed data inside link using data attribute (like data-text in below snippet )

use the hover listener then access current hovered by using $(this) key word , then display the data , that's all

See below snippet :

const $firstul = $('#span_Lan');

$("#ul_box li").hover(function() {
  $firstul.html( $(this).find('a').data("text") )
})

#ul_box li {
  border:1px solid black;
}

#ul_box li:hover {
  border-color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <ul>
    <li id="li_box"> <span id="span_Lan"></span></li>
  </ul>
  <ul id="ul_box">
    <li><a id="lnk1" data-text="111" >aaa</a></li>
    <li><a id="lnk2" data-text="222" >bbb</a></li>
    <li><a id="lnk3" data-text="333" >ccc</a></li>
    <li><a id="lnk3" data-text="444" >ddd</a></li>
  </ul>
</div>

CodePudding user response：

To make your code a bit more readable, you should use querySelectorAll to select the links. Then run over the elements with forEach to add an eventListener per element.

In the example below I have created a function called handleMouseOver. This function expects an id as a parameter, which is the id of the listitem.

The function then fires a switch statement to determine which text belongs to this ID. This text is then applied to your span_Lan element.

I also call the function once when initiating the script, to fill in the default value (namely 111).

const firstul = document.getElementById('span_Lan');

document.querySelectorAll('#ul_box li').forEach(e => e.addEventListener('mouseover', (e) => handleMouseOver(e.target.id)));
                                                                        
function handleMouseOver(id) {
  let text;
  switch (id) {
    case "lnk1":
      text = "111"
      break;
      case "lnk2":
      text = "222"
      break;
      case "lnk3":
      text = "333"
      break;
    default:
      text = "111"
  }
  firstul.innerText = text;
}

handleMouseOver();

<div>
  <ul>
    <li id="li_box"> <span id="span_Lan"></span></li>
  </ul>
  <ul id="ul_box">
    <li><a id="lnk1" >aaa</a></li>
    <li><a id="lnk2" >bbb</a></li>
    <li><a id="lnk3" >ccc</a></li>
  </ul>
</div>

CodePudding user response：

There's a few issues with your code

• you need to use innerText or innerHtml instead of value
• next you need to pass the event into your mouse over and use the current target instead of boxLi[i]
• finally, move your ids to the li as that is what the mouse over is on

Also this isn't jQuery

const firstul = document.getElementById('span_Lan');
const boxLi = document.getElementById('ul_box').children;
for (let i = 0; i < boxLi.length; i  ) {
  boxLi[i].addEventListener('mouseover', e => {
    firstul.innerText = e.currentTarget.textContent;                     // not sure if you want this line - it's in your code but your question  says nothing about having the letters in the first ul
    if (e.currentTarget.id == "lnk1") firstul.innerText  = "111";
    else if (e.currentTarget.id == "lnk2") firstul.innerText  = "222";
    else if (e.currentTarget.id == "lnk3") firstul.innerText  = "333";
  })
}

<div>
  <ul>
    <li id="li_box"> <span id="span_Lan">111</span></li>
  </ul>
  <ul id="ul_box">
    <li id="lnk1"><a >aaa</a></li>
    <li id="lnk2"><a >bbb</a></li>
    <li id="lnk3"><a >ccc</a></li>
  </ul>
</div>