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

您可能想了解更多关于选择器、如何选择类、块级别等的信息。

一些链接可能会有所帮助：

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>

Answer 2

您可以使用纯 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

Answer 3

这是一个非常简单的使用 jQuery .siblings 方法的例子：

$(function () {

    $('.posted').click(function () {

        $('button', this).show();
        $(this).siblings().find('button').hide();
    });
});

https://jsfiddle.net/3tg6o1q7/