首页 文章

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

提问于
浏览 次
1

我有一个里面有按钮的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 (?)
}
javascript html

3 回答

  • 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>
    回复于
  • 0

    您可以使用事件冒泡， querySelector 和像这样的元素 classList 属性使用纯JavaScript进行此操作 .

    将您的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

    回复于
  • 1

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

    $(function () {

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

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

    https://jsfiddle.net/3tg6o1q7/

    回复于

相关问题