Javascript - 单击时在 DIV 内显示一个按钮(并隐藏所有其他按钮)

Question

我有一个 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 (?)
}

Answer 1

您可能想阅读更多关于选择器、如何选择类、 block 级别等的信息。

一些链接可能会有帮助:

CSS 选择器:

https://www.w3schools.com/cssref/css_selectors.asp

jQuery 选择器:

https://api.jquery.com/category/selectors/

解决方案 - 使用 jQuery:

$('.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>

解决方案——纯js版:

//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>