如何在 jQuery hover 中使用 for 循环

Question

I want to use loops to iterate and apply hover with each element then remove class from another collection of elements. Tried each function but didn't work.

 $("#product").hover(function () { $(".z").removeClass("viz"); $(".arrow1").css("transform", "rotate(180deg)") }, function () { $(".z").addClass("viz"); $(".arrow1").css("transform", "rotate(0deg)") }) $("#company").hover(function () { $(".y").removeClass("viz"); $(".arrow2").css("transform", "rotate(180deg)") }, function () { $(".y").addClass("viz"); $(".arrow2").css("transform", "rotate(0deg)") }) $("#connect").hover(function () { $(".x").removeClass("viz"); $(".arrow3").css("transform", "rotate(180deg)") }, function () { $(".x").addClass("viz"); $(".arrow3").css("transform", "rotate(0deg)") })

Answer 1

You can create an array of the IDs of the elements you want to select and loop through them. like this:

 let list = ['product', 'company', 'connect'] list.forEach(element => { $("#"+element).hover(function () { $(".z").removeClass("viz"); $(".arrow1").css("transform", "rotate(180deg)") }, function () { $(".z").addClass("viz"); $(".arrow1").css("transform", "rotate(0deg)") }) })

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

EDIT: Using jquery selectors, for selecting list items of a ul with id="menu" is something like this:

var items = $("ul#menu li");
for (let li of items) {
    $(li).hover(function () {
        // ...
    })
}