javascript - 如何使用javascript在父div内显示子div而不触发其他div

Question

   *͏͏͏抱歉，标题太大͏͏͏ *͏

我今天有一个问题想和大家讨论一下。
我遇到这个问题，当我点击按钮“COMMENT”时，它会触发 JavaScript 代码显示 CHILD.div 位于 PARENT.div 内，但它会触发上方的那个!

代码片段:

function toggleHiddenDiv(id) {
  var div = document.getElementById(id);
  div.style.display = div.style.display == "block" ? "none" : "block";
}

function toggleVisibleDiv(id) {
  var div = document.getElementById(id);
  div.style.display = div.style.display == "none" ? "block" : "none";
}

<div class="posted_post_window">
  <span class="pfpicture"><img src="img/nurkiprofil.jpg" /><span class="pfname">Nurudin Imsirovic</span></span><span class="close" onclick="this.parentNode.parentNode.removeChild(this.parentNode);"></span>
  <div class="content">Ali je ovo smor ljudi moji...</div>
  <div class="react_ui"><button>LIKE</button><button>SHARE</button><button onclick="toggleHiddenDiv('submitcontainer');">COMMENT</button><button>REPORT</button></div>
  <div class="comments_ui">
    <div class="caption">Comments</div>
    <div class="container"><br>
      <div class="pfcontainer"><img src="img/aldinprofil.jpg" alt="Profile Picture" /><span class="pfname">Aldin Hadžić</span></div>
      <span class="comment">Poz</span>
    </div>

    <div class="container"><br>
      <div class="pfcontainer"><img src="img/osmanprofil.jpg" alt="Profile Picture" /><span class="pfname">Osman Hasić</span></div>
      <span class="comment">Test123Test123Test123Test123Test123Test123Test123Test123Test123Tes
        t123Test123Test123Test123Test123Test123Test123Test123Test123Test1
        23Test123Test123Test123Test123Test123Test123Test123Test123Test123Test12
        3Test123Test123Test123Test123Test123Test123Test123Test123Test123Test123Tes
        t123Test123Test123Test123Test123Test123Test123Test123Test123Test123Test123Test
        123Test123Test123Test123Test123Test123Test123Test123Test123Test123</span>
    </div>

    <div class="container"><br>
      <div class="pfcontainer"><img src="img/eldanprofil.jpg" alt="Profile Picture" /><span class="pfname">Eldan Delić</span></div>
      <span class="comment">xDDDDDD</span>
    </div>

    <div id="submitcontainer" class="submitcontainer">
      <div class="pfcontainer">
        <img src="img/nurkiprofil.jpg" /><span class="pfname">Nurudin Imsirovic</span>
        <textarea name="s.comment" rows="4"></textarea>
      </div>
    </div>
  </div>
</div>

所以对我来说问题是

<button onclick="toggleHiddenDiv('submitcontainer');">COMMENT</button>

如何让 JavaScript 只从调用的 PARENT.div 中获取 ID？

一如既往，提前致谢!

Answer 1

您的问题是您尝试通过元素的 id 属性来定位该元素，但文档中有多个具有相同 id 的元素。这在 HTML 中是非法的，您应该删除这些 id 或使它们唯一。您还在 HTML 中使用 onclick 属性，这是非常不可取的。你应该使用 event listeners相反，但除此之外，您的按钮单击无法知道哪个容器被单击或需要定位。按照目前的情况，您可以传递对方法的上下文引用，并使用它来告诉应该显示或隐藏哪个方法。并不是说我还更改了显示/隐藏方法的语法。展望 future ，要定位 ID，您将使用 toggleHiddenDiv('#mydiv')。

function toggleHiddenDiv(selector, context) {
  context = context ? context : document.body;
  var div = context.querySelector(selector);
  div.style.display = div.style.display == "block" ? "none" : "block";
}

function toggleVisibleDiv(selector, context) {
  context = context ? context : document.body;
  var div = context.querySelector(selector);
  div.style.display = div.style.display == "none" ? "block" : "none";
}

<div class="posted_post_window">
  <span class="pfpicture"><img src="img/nurkiprofil.jpg" /><span class="pfname">Nurudin Imsirovic</span></span><span class="close" onclick="this.parentNode.parentNode.removeChild(this.parentNode);"></span>
  <div class="content">Ali je ovo smor ljudi moji...</div>
  <div class="react_ui"><button>LIKE</button><button>SHARE</button><button onclick="toggleHiddenDiv('.submitcontainer', this.parentNode.parentNode);">COMMENT</button><button>REPORT</button></div>
  <div class="comments_ui">
    <div class="caption">Comments</div>
    <div class="container"><br>
      <div class="pfcontainer"><img src="img/aldinprofil.jpg" alt="Profile Picture" /><span class="pfname">Aldin Hadžić</span></div>
      <span class="comment">Poz</span>
    </div>

    <div class="container"><br>
      <div class="pfcontainer"><img src="img/osmanprofil.jpg" alt="Profile Picture" /><span class="pfname">Osman Hasić</span></div>
      <span class="comment">Test123Test123Test123Test123Test123Test123Test123Test123Test123Tes
        t123Test123Test123Test123Test123Test123Test123Test123Test123Test1
        23Test123Test123Test123Test123Test123Test123Test123Test123Test123Test12
        3Test123Test123Test123Test123Test123Test123Test123Test123Test123Test123Tes
        t123Test123Test123Test123Test123Test123Test123Test123Test123Test123Test123Test
        123Test123Test123Test123Test123Test123Test123Test123Test123Test123</span>
    </div>

    <div class="container"><br>
      <div class="pfcontainer"><img src="img/eldanprofil.jpg" alt="Profile Picture" /><span class="pfname">Eldan Delić</span></div>
      <span class="comment">xDDDDDD</span>
    </div>

    <div class="submitcontainer" style="display:none">
      <div class="pfcontainer">
        <img src="img/nurkiprofil.jpg" /><span class="pfname">Nurudin Imsirovic</span>
        <textarea name="s.comment" rows="4"></textarea>
      </div>
    </div>
  </div>
</div>