英文:
How can I simplify my Jquery code while keeping addClass and removeClass?
问题
每当我添加新的<li>和<img>元素时，我还必须在.js文件中添加新的代码行。
Codepen 这是在线代码的工作方式以及在编辑脚本后应继续工作的方式。
// 鼠标进入$(".list li:nth-child(1)").on('mouseenter', function() {$(".img-display img.show").removeClass("show");$(".img-display img:nth-child(1)").addClass("show");})$(".list li:nth-child(2)").on('mouseenter', function() {$(".img-display img.show").removeClass("show");$(".img-display img:nth-child(2)").addClass("show");})$(".list li:nth-child(3)").on('mouseenter', function() {$(".img-display img.show").removeClass("show");$(".img-display img:nth-child(3)").addClass("show");})// 鼠标离开$(".list li:nth-child(1)").on('mouseleave', function() {$(".img-display img.show").addClass("show");$(".img-display img:nth-child(1)").removeClass("show");})$(".list li:nth-child(2)").on('mouseleave', function() {$(".img-display img.show").addClass("show");$(".img-display img:nth-child(2)").removeClass("show");})$(".list li:nth-child(3)").on('mouseleave', function() {$(".img-display img.show").addClass("show");$(".img-display img:nth-child(3)").removeClass("show");})
我希望能够通过保持addClass、removeClass、mouseenter和mouseleave来简化我的代码，而不必每次添加新元素时都添加另一行代码。
目前，我只有这个来标识列表元素：
$(".list li").on('mouseenter', function() {var index = $(this).index()})
英文:
Every time I add a new <li> and <img> element I also have to add a new line of code in the .js file
Codepen Here is the online code of how it works and how it should continue to work after editing the script.
//Mouseenter$(".list li:nth-child(1)").on('mouseenter', function() {$(".img-display img.show").removeClass("show");$(".img-display img:nth-child(1)").addClass("show");})$(".list li:nth-child(2)").on('mouseenter', function() {$(".img-display img.show").removeClass("show");$(".img-display img:nth-child(2)").addClass("show");})$(".list li:nth-child(3)").on('mouseenter', function() {$(".img-display img.show").removeClass("show");$(".img-display img:nth-child(3)").addClass("show");})//Mouseleave$(".list li:nth-child(1)").on('mouseleave', function() {$(".img-display img.show").addClass("show");$(".img-display img:nth-child(1)").removeClass("show");})$(".list li:nth-child(2)").on('mouseleave', function() {$(".img-display img.show").addClass("show");$(".img-display img:nth-child(2)").removeClass("show");})$(".list li:nth-child(3)").on('mouseleave', function() {$(".img-display img.show").addClass("show");$(".img-display img:nth-child(3)").removeClass("show");})
I wanted to be able to simplify my code by keeping addClass, removeClass, mouseenter & mouseleave and not having to add another line of code every time I add new elements.
At the moment I only have this to identify the elements of the list:
$(".list li").on('mouseenter', function() {var index = $(this).index()})
答案1
得分: 1
以下是翻译好的部分：
"Anyway you just need a little reasoning for this problem. Here's all you need:
const lis = $('.list li');lis.on('mouseenter', function() {const index = lis.index(this);$('.img-display img.show').removeClass('show');$('.img-display img').eq(index).addClass('show');})```"<details><summary>英文:</summary>Anyway you just need a little reasoning for this problem. Here's all you need:```javascriptconst lis = $(".list li")lis.on('mouseenter', function() {const index = lis.index(this)$(".img-display img.show").removeClass("show");$(".img-display img").eq(index).addClass("show")})
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论