Question 36197 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Using mouseover in jquery

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" class="">aaa</a></li>
    <li><a id="lnk2" class="">bbb</a></li>
    <li><a id="lnk3" class="">ccc</a></li>
  </ul>
</div>
Tags:

3

Answers


  1. 0

    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 class="">aaa</a></li>
    <li id="lnk2"><a class="">bbb</a></li>
    <li id="lnk3"><a class="">ccc</a></li>
  </ul>
</div>
    Login or Signup to reply.
  2. 0

    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" class="">aaa</a></li>
    <li><a id="lnk2" class="">bbb</a></li>
    <li><a id="lnk3" class="">ccc</a></li>
  </ul>
</div>
    Login or Signup to reply.
  3. 0

    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" class="">aaa</a></li>
    <li><a id="lnk2" data-text="222" class="">bbb</a></li>
    <li><a id="lnk3" data-text="333" class="">ccc</a></li>
    <li><a id="lnk3" data-text="444" class="">ddd</a></li>
  </ul>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search