问题：
单击nodelist中的元素时切换src属性
巫马翰翮
我已经创建了一组问题和答案，每个问题旁边是一个img，每当有人点击一个问题时，我会尝试切换该图像的src。到目前为止，因为问题存储在nodelist中，我设法让图像切换，但它切换了所有的图像，我只想让我点击的问题切换存储在里面的图像。
null
let returnContent = [{
question: "How do I return an item?",
icon: "https://via.placeholder.com/50x50",
answer: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
},
{
question: "NEW! Instant Returns with InPost Lockers",
icon: "https://via.placeholder.com/50x50",
answer: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
},
{
question: "What happens if I miss my delivery?",
icon: "https://via.placeholder.com/50x50",
answer: "Our carrier delivers between 9am and 10pm, which may vary depending on the service selected and a signature is required. <br> There are a number of options available if you think you won't be in to sign for your order. We'll pass your e-mail address and mobile number (if provided) to Hermes or DPD and they'll provide you with information about your delivery by e-mail or text message the evening before. <br> Please note deliveries outside of the UK can take anything up to 10 days. Follow your order using the tracking link in your despatch email to check if any delivery attempt has been made.",
},
{
question: "Can I track my delivery?",
icon: "https://via.placeholder.com/50x50",
answer: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
},
{
question: "Do I pay customs or import charges?",
icon: "https://via.placeholder.com/50x50",
answer: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
},
{
question: "Can I change my address after ordering?",
icon: "https://via.placeholder.com/50x50",
answer: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
},
{
question: "Is the site secure?",
icon: "https://via.placeholder.com/50x50",
answer: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
},
]
jQuery($ => {
let questionHtml = returnContent.map(obj => `<div class="question-container"><div class="questions"> <a onclick=""><h3>${obj.question}</h3></a><img src="${obj.icon}" class="toggle-icon"></div><div class="answer" hidden><p>${obj.answer}</p></div></div>`).join('');
$('#Returns').append(`<div class="returnsWrapper">${questionHtml}</div>`);
$('.questions').on('click', e => $(e.currentTarget).next('.answer').toggle());
let plus = "https://via.placeholder.com/50x50";
let minus = "https://via.placeholder.com/100x50";
$('.questions').on('click', () => {
if($('.toggle-icon').attr('src') === plus) {
console.log('hello')
$('.toggle-icon').attr('src', minus)
}else {
$('.toggle-icon').attr('src', plus)
}
})
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab-content" id="Returns">
<div class="title-container">
<p>Returns</p>
</div>
</div>null
共有1个答案
宣煜
您可以使用$(E.currentTarget)获取并更改放置click事件的特定toggle-icon的引用。查找（“.toggle-icon”）IMG的src
演示代码：
let returnContent = [{
question: "How do I return an item?",
icon: "https://via.placeholder.com/50x50",
answer: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
},
{
question: "NEW! Instant Returns with InPost Lockers",
icon: "https://via.placeholder.com/50x50",
answer: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
},
{
question: "What happens if I miss my delivery?",
icon: "https://via.placeholder.com/50x50",
answer: "Our carrier delivers between 9am and 10pm, which may vary depending on the service selected and a signature is required. <br> There are a number of options available if you think you won't be in to sign for your order. We'll pass your e-mail address and mobile number (if provided) to Hermes or DPD and they'll provide you with information about your delivery by e-mail or text message the evening before. <br> Please note deliveries outside of the UK can take anything up to 10 days. Follow your order using the tracking link in your despatch email to check if any delivery attempt has been made.",
},
{
question: "Can I track my delivery?",
icon: "https://via.placeholder.com/50x50",
answer: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
},
{
question: "Do I pay customs or import charges?",
icon: "https://via.placeholder.com/50x50",
answer: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
},
{
question: "Can I change my address after ordering?",
icon: "https://via.placeholder.com/50x50",
answer: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
},
{
question: "Is the site secure?",
icon: "https://via.placeholder.com/50x50",
answer: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
},
]
jQuery($ => {
let questionHtml = returnContent.map(obj => `<div class="question-container"><div class="questions"> <a onclick=""><h3>${obj.question}</h3></a><img src="${obj.icon}" class="toggle-icon"></div><div class="answer" hidden><p>${obj.answer}</p></div></div>`).join('');
$('#Returns').append(`<div class="returnsWrapper">${questionHtml}</div>`);
let plus = "https://via.placeholder.com/50x50";
let minus = "https://via.placeholder.com/100x50";
$('.questions').on('click', (e) => {
$(e.currentTarget).next('.answer').toggle();
//check toggle-icon src
if ($(e.currentTarget).find(".toggle-icon").attr('src') === plus) {
//only change src where questions has been clicked
$(e.currentTarget).find(".toggle-icon").attr('src', minus)
} else {
$(e.currentTarget).find(".toggle-icon").attr('src', plus)
}
})
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab-content" id="Returns">
<div class="title-container">
<p>Returns</p>
</div>
</div>
类似资料：
-
我有一些jQuery，可以将定义列表转换为可扩展/可折叠的常见问题列表。 我在整个网站上有几个常见问题的链接，点击它们会将您发送到常见问题页面并展开相关问题，问题是一些常见问题的答案有指向其他问题的链接，而散列链接会跳到相关问题，但不会展开答案。 这是因为jQuery位于$（文档）中。就绪（function（），因此代码仅在页面重新加载后激活？是否需要触发重新加载？ CHeers 有关完整代码，请
-
问题内容： 如何使用ng-click分别在几个元素上切换类？ 在这个问题中，点击切换类是这样完成的： CSS： JS： HTML： 但是，如果我有几个按钮，每个按钮都应通过ng-click切换自己的类，该怎么办？ 如果以这种方式设置它： HTML： 如果我按下两个按钮，则两个按钮都将切换。 我知道一种解决方法是为每个按钮定义一个自己的ng-click事件（对于button1，例如f.ex togg
-
这是我的问题。 我有一个像这样的简单表格（示例）： null null 并且我正在尝试列的名称，同时单击元素。 我想这可能是一个简单的解决办法但我找不到。 提前致谢
-
我有一个待办事项列表，它是通过jsonplace生成的，点击按钮用虚拟内容填充div。 我试图实现的是，当我点击单个div（任务）时，它应该被删除/隐藏。 迄今 JS “removeTask”事件处理程序为所有生成的div（任务）而不是单击的div切换类。 如何在单击的div上添加/删除类？
-
问题内容： 如何在vue.js中切换类？ 我有以下几点： 当我单击时，我想按以下方式申请课程： 这需要切换，即每次单击它都需要添加/删除类。 问题答案： 您可以让活动类依赖于布尔数据值：
-
我试图刮掉一个页面，但我有时无法点击链接/按钮。 当网页加载时，那么loadingWhiteBox会先出现，然后在几秒钟后消失（但它会保留在超文本标记语言代码中），只要该框出现在网站上，我就不能点击链接并获得以下内容错误消息： 有什么办法解决这个问题吗？我已经尝试使用以下命令： 但即使元素不处于活动状态，它也存在。