我有一个里面有按钮的DIVS列表。默认情况下，所有按钮都是隐藏的。当我在DIV区域内单击时，此单击DIV内的当前按钮应显示（class ='。db'）并且所有先前单击/显示的按钮都应隐藏（class ='。dn'）。换句话说，任何时候都应该只显示一个按钮（当前被点击），而其他所有按钮都应该被隐藏。
我想使用vanilla Javascript并在下面尝试过，但它不起作用。我觉得有一些小错误，但不知道在哪里..注意 - DIVS和按钮没有自己的唯一ID（它们只有相同的CSS（.posted）类。
PS - 也许最好不要添加这个onClick =“t（）;”每个DIV并使用'addEventListener'函数，但这对我来说太过分了; ）
CSS：
.dn {display:none}
.db {display:block}
.posted {
height: 50px;
width: 100px;
background-color: green;
border: 2px solid red;
}
HTML：
<div class="posted" onClick="t();">
<button class="dn">Reply</button>
</div>
<div class="posted" onClick="t();">
<button class="dn">Reply</button>
</div>
<div class="posted" onClick="t();">
<button class="dn">Reply</button>
</div>
JAVASCRIPT：
function t()
{
var x=document.getElementsByClassName("posted"),i,y=document.getElementsByTagName("button");
for(i=0;i<x.length;i++)
{
x[i].y[0].className="dn";
};
x.y[0].className='db';//make sure the currently clicked DIV shows this button (?)
}
答案 0 :(得分：1)
您可能想要阅读有关选择器，如何选择类，块级别等的更多信息。
某些链接可能会有所帮助：
CSS选择器：
https://www.w3schools.com/cssref/css_selectors.asp
jQuery选择器：
https://api.jquery.com/category/selectors/
$('.posted').on('click', function() {
//find all class called posted with child called dn, then hide them all
$('.posted .dn').hide();
//find this clicked div, find a child called dn and show it
$(this).find('.dn').show();
});.dn {
display: none
}
.db {
display: block
}
.posted {
height: 50px;
width: 100px;
background-color: green;
border: 2px solid red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="posted">
<button class="dn">Reply1</button>
</div>
<div class="posted">
<button class="dn">Reply2</button>
</div>
<div class="posted">
<button class="dn">Reply3</button>
</div>
//get list of div block with class="posted"
var divlist = Array.prototype.slice.call(document.getElementsByClassName('posted'));
//for each div
divlist.forEach(function(item) {
//add click event for this div
item.addEventListener("click", function() {
//hide all button first
divlist.forEach(function(el) {
el.getElementsByTagName('button')[0].classList.add('dn');
});
//show button of the div clicked
this.getElementsByTagName('button')[0].classList.remove('dn');
}, false);
});.dn {
display: none
}
.db {
display: block
}
.posted {
height: 50px;
width: 100px;
background-color: green;
border: 2px solid red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="posted">
<button class="dn">Reply1</button>
</div>
<div class="posted">
<button class="dn">Reply2</button>
</div>
<div class="posted">
<button class="dn">Reply3</button>
</div>
答案 1 :(得分：1)
您可以使用简单的JavaScript使用事件冒泡，querySelector和元素classList属性执行此操作。
将您的HTML更改为如下所示：
<div class="posts">
<div class="posted">
<button class="dn">Reply</button>
</div>
<div class="posted" >
<button class="dn">Reply</button>
</div>
<div class="posted" >
<button class="dn">Reply</button>
</div>
</div>
然后使用这样的JavaScript：
var posts = document.querySelector('.posts');
var allPosted = document.querySelectorAll('.posted');
//clicks bubble up into the posts DIV
posts.addEventListener('click', function(evt){
var divClickedIn = evt.target;
//hide all the buttons
allPosted.forEach(function(posted){
var postedBtn = posted.querySelector('button');
postedBtn.classList.remove('db');
});
// show the button in the clicked DIV
divClickedIn.querySelector('button').classList.add('db')
});
您可以在此处找到一个有效的示例：http://output.jsbin.com/saroyit
答案 2 :(得分：0)
这是使用jQuery .siblings方法的非常简单的示例：
$(function () {
$('.posted').click(function () {
$('button', this).show();
$(this).siblings().find('button').hide();
});
});