只显示与给定类最近的元素

Question

如何更改代码，以便当我单击reply-img时，只显示以下具有reply-form类的元素，而不同时显示其他元素?

我有几个元素具有reply-img类，我总是希望显示与reply-form类最接近的元素

HTML blade.php

<div class="comments-form">
@foreach($comments as $comment)

<div class="comments">
...

<div class="reply-img">
<img src="{{asset('img/react.svg')}}" alt="">
</div>
</div>
...
<form class='login-form mmm ml-x reply-form'</form>

@endforeach
...
</div>

JS

<script>
// Get all image elements
var images = document.querySelectorAll(".reply-img");

// Attach a click event listener to each image
images.forEach(function(image) {
image.addEventListener("click", function() {
// Show all forms
var forms = document.querySelectorAll(".reply-form");
forms.forEach(function(form) {
form.style.display = "block";
});
});
});
</script>

Answer 1

您可以两次使用图像元素的.parentElement来导航到<div class="comments">。然后用.nextElementSibling得到form元素。

:

const img = document.querySelector('img');
const form = img.parentElement.parentElement.nextElementSibling;
console.log(form.innerHTML);

<div class="comments">
<div class="reply-img">
<img src="https://via.placeholder.com/150" />
</div>
</div>
<form class='login-form mmm ml-x reply-form'>blah</form>

Answer 2

你需要改变你的函数，使它只显示下一个表单，而不是所有的:

images.forEach(function(image) {
image.addEventListener("click", function() {
let ele = image.parentNode.nextElementSibling;
while(ele){
if(ele.matches('.reply-form')){
ele.style.display = "block";
return;
}
ele = ele.nextElementSibling;
}
});
});

Answer 3

我发现在注释上切换一个类来表示活动的注释更简洁。然后我们就可以用CSS来处理表单了。

下面是一个例子:

const comments = document.querySelectorAll('.comments');
document.querySelectorAll('.reply-img').forEach(img => img.addEventListener('click', function() {
comments.forEach(x => x.classList.remove('active-comment'));
this.parentElement.classList.add('active-comment');
}))

.reply-form {
width: 100px;
height: 50px;
background: lightblue;
margin: 10px 0;
}
.comments:not(.active-comment)+.reply-form {
display: none;
}

<div class="comments-form">
<div class="comments">
<div class="reply-img">
<img src="https://via.placeholder.com/50" alt="">
</div>
</div>
...
<form class='login-form mmm ml-x reply-form'></form>
<div class="comments">
<div class="reply-img">
<img src="https://via.placeholder.com/50" alt="">
</div>
</div>
...
<form class='login-form mmm ml-x reply-form'></form>
<div class="comments">
<div class="reply-img">
<img src="https://via.placeholder.com/50" alt="">
</div>
</div>
<form class='login-form mmm ml-x reply-form'></form>
...
</div>

这也可以不使用JavaScript，只使用CSS。通过向注释添加tabindex属性，注释获得焦点状态。现在我们可以使用焦点状态来切换表单的显示。

请注意，在这种情况下，单击注释将导致表单显示，而不仅仅是单击图像。

.reply-form {
width: 100px;
height: 50px;
background: lightblue;
margin: 10px 0;
}
.comments:not(:focus)+.reply-form {
display: none;
}

<div class="comments-form">
<div class="comments" tabindex="0">
<div class="reply-img">
<img src="https://via.placeholder.com/50" alt="">
</div>
</div>
...
<form class='login-form mmm ml-x reply-form'></form>
<div class="comments" tabindex="0">
<div class="reply-img">
<img src="https://via.placeholder.com/50" alt="">
</div>
</div>
...
<form class='login-form mmm ml-x reply-form'></form>
<div class="comments" tabindex="0">
<div class="reply-img">
<img src="https://via.placeholder.com/50" alt="">
</div>
</div>
<form class='login-form mmm ml-x reply-form'></form>
...
</div>