Question

*͏͏͏͏抱着巨大的头衔͏͏͏*͏

我今天有一个问题，我想与你们讨论我遇到这个问题，当我点击 按钮“COMMENT” 时，会触发JavaScript代码以显示 CHILD.div < / strong>在 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代替，但除此之外，您的按钮点击无法知道点击了哪个容器或需要定位。就目前而言，您可以将上下文引用传递给方法，并使用它来告诉应该显示或隐藏哪个方法。不是我也改变了show / hide方法的语法。接下来，要使用toggleHiddenDiv('#mydiv')来定位ID。

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>

如何在不触发其他内容的情况下使用javascript在父div中显示子div

1 个答案: