英文:
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:
```javascript
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")
})
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论