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

我有一个里面有按钮的div列表。默认情况下，所有按钮都是隐藏的。当我在DIV区域内单击时，此单击DIV内的当前按钮应显示（class='.db'），所有以前单击/显示的按钮应隐藏（class='.dn'）。换句话说，任何时候都应该只显示一个按钮（当前单击），而隐藏所有其他按钮

我想使用vanilla Javascript并在下面进行了尝试，但它不起作用。我觉得有点小错误，但不知道在哪里。。注意-div和按钮没有自己的唯一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;
}

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

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 (?)
}

HTML:

.dn {display:none}
.db {display:block}
.posted {
  height: 50px;
  width: 100px;
  background-color: green;
  border: 2px solid red;
}

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

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 (?)
}

回复
回复
回复

JAVASCRIPT:

.dn {display:none}
.db {display:block}
.posted {
  height: 50px;
  width: 100px;
  background-color: green;
  border: 2px solid red;
}

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

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 (?)
}

函数t（）
{
var x=document.getElementsByClassName（“已发布”），i，y=document.getElementsByTagName（“按钮”）；
对于（i=0；i，您可能需要阅读有关选择器的更多信息，如何选择类、块级别等

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

CSS选择器：


jQuery选择器：


解决方案-使用jQuery：

$（'.posted'）。在（'click'，function（）上{
//查找所有名为post的类以及名为dn的子类，然后将它们全部隐藏
$（'.posted.dn'）.hide（）；
//找到这个单击的div，找到一个名为dn的子项并显示它
$（this.find（'.dn'）.show（）；
})；
.dn{
显示：无
}
.db{
显示：块
}
.张贴{
高度：50px；
宽度：100px；
背景颜色：绿色；
边框：2倍纯红；
}

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

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

CSS选择器：


jQuery选择器：


解决方案-使用jQuery：

$（'.posted'）。在（'click'，function（）上{
//查找所有名为post的类以及名为dn的子类，然后将它们全部隐藏
$（'.posted.dn'）.hide（）；
//找到这个单击的div，找到一个名为dn的子项并显示它
$（this.find（'.dn'）.show（）；
})；
.dn{
显示：无
}
.db{
显示：块
}
.张贴{
高度：50px；
宽度：100px；
背景颜色：绿色；
边框：2倍纯红；
}

答复1
答复2
答复3
下面是使用jQuery
方法的一个非常简单的示例

$(function () {

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

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

下面是使用jQuery
方法的一个非常简单的示例

$(function () {

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

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

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

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')
});

您可以在这里找到一个工作示例：
您可以使用普通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>

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')
});

你可以在这里找到一个工作示例：
你只需要在js中或使用jquery就可以了。jquery可以让你的工作更轻松。你只需要在js中或使用jquery就可以了。jquery可以让你的工作更轻松。如果是纯js，我会非常高兴：）@Tom ok给你买了纯js的，我几乎放弃了，因为它一开始不工作（它在div中不包含任何元素，但当出现一些文本时，子对象[0]并没有指向按钮）。因此，我将子对象[0]更改为getElementsByTagName（'button'）[0]，它现在可以工作了，谢谢！@Tom Cool，很高兴知道。我也进行了更新，以防它也能帮助其他人。感谢您的留言如果它是纯JS的话，我会非常高兴：）@Tom ok为您提供了纯js版本，我几乎放弃了它，因为它一开始不起作用（它在div中没有元素，但当有一些文本时，子对象[0]没有指向按钮）。因此我将子对象[0]更改为getElementsByTagName（“按钮”）[0]现在可以用了，谢谢！@Tom Cool，很高兴知道。我也更新了，以防它也能帮助其他人。谢谢你的留言