Question

所以我有这个HTML：

<div class="tip-box">
    <div class="tip-title" onclick="toggleTip()">
        <h2>Tip 1</h2>
    </div>
    <div class="tip-content hidden">
        <p>Tip 1 content</p>
    </div>
</div>

这个Javascript：

function toggleTip() {
    $(this).siblings(".tip-content").toggleClass("hidden");
}

希望这显然是应该做的，但它不起作用。使用.siblings()似乎并没有以这种方式运作。

对此有什么正确的解决方案？要获得某个类型或某个类的下一个兄弟，然后隐藏/显示它？

Answer 1

您可以使用Jquery功能。

<div class="tip-box">
    <div class="tip-title">
        <h2>Tip 1</h2>
    </div>
    <div class="tip-content hidden">
        <p>Tip 1 content</p>
    </div>
</div>

$(document).ready(function(){
    $('.tip-title').click(function(){
        $(this).siblings(".tip-content").toggleClass("hidden");
    });
});

您也可以使用此

<div class="tip-box">
    <div class="tip-title" onclick="toggloTip(this)">
        <h2>Tip 1</h2>
    </div>
    <div class="tip-content hidden">
        <p>Tip 1 content</p>
    </div>
</div>


<script>
function toggloTip(elm) {
    $(elm).siblings(".tip-content").toggleClass("hidden");
}
</script>

Answer 2

这个JavaScript怎么样：

$(function(){
    $('.tip-box').on('click', '.tip-title', function(){
        $(this).next('.tip-content').toggleClass('hidden');
    });
});

在使用jQuery时，删除使用onclick属性的想法。

Answer 3

以前的答案都没有，甚至没有 serial-upvoted one;），实际上解释了问题，为什么他们的解决方案有效。

问题是内联onclick处理程序不传递其当前上下文。在onclick="" JavaScript代码this内部是单击的元素。一旦调用全局函数（如toggleTip），该上下文就会丢失。函数接收的this是window而不是元素。

对于原始JavaScript代码，通常的快速修复方法是将this作为参数传递给全局函数。

e.g。

onclick="toggleTip(this)"

并在函数中接收一个参数：

function toggleTip(element) {
    $(element).siblings(".tip-content").toggleClass("hidden");
}

然而，正如您使用jQuery一样，内联事件处理程序实际上是一个坏主意。它们无缘无故地将事件注册与事件处理程序代码分开，并且不允许在同一元素上使用相同类型的多个事件处理程序。他们还绕过了jQuery使用的相当酷的事件冒泡系统。

使用jQuery的首选替代方法是使用jQuery选择元素，使用jQuery一步连接事件：

jQuery(function($){
    $('.tip-title').click(function(){
        $(this).siblings(".tip-content").toggleClass("hidden");
    });
});

由于您只需要后面的元素，并且可能会添加更多对，因此更好的选择是使用nextAll和first()，使用相同的jQuery过滤器，而不是siblings ：

e.g。

jQuery(function($){
    $('.tip-title').click(function(){
        $(this).nextAll(".tip-content").first().toggleClass("hidden");
    });
});

或者，你可以保证它是下一个元素，使用next作为@Tim Vermaelen所做的（有或没有选择器没有区别，所以不妨留下它）：

jQuery(function($){
    $('.tip-title').click(function(){
        $(this).next().toggleClass("hidden");
    });
});

注意：在此示例中，jQuery(function($){是一个 DOM就绪事件处理程序，它是$(document).ready(function(){YOUR CODE});的一个非常方便的快捷方式版本，它也传递了一个本地范围的$价值。对于那些将此代码误认为错误的IIFE的人，这是一个有效的示例：http://jsfiddle.net/TrueBlueAussie/az4r27uz/

Answer 4

你可以使用带有nextElementSibling节点属性的纯javaScript，如下所示，我想你想和兄弟姐妹一起做这个操作。

function getChildrens(n, selector) {
  var nodes = [];
  while (n.nextElementSibling != null) {
    if (n.nextElementSibling.hasOwnProperty('classList')) {
      if (n.nextElementSibling.classList.contains(selector)) {
        //return n.nextElementSibling;
        nodes.push(n.nextElementSibling);
      }
    }
    n = n.nextElementSibling;
  }
  return nodes;
};

function getSiblings(n, selector) {
  return getChildrens(n, selector);
}

function toggleTip(elem) {
  var siblings = getSiblings(elem, "tip-content");
  if (siblings.length > 0) {
    for (var i = 0; i < siblings.length; i++) {
      siblings[i].classList.toggle("hidden");
    }
  }
}

.hidden {
  display: none;
}

<div class="tip-box">
  <div class="tip-title" onclick="toggleTip(this)">
    <h2>Tip 1</h2>
  </div>
  <div class="tip-content hidden">
    <p>Tip 1 content</p>
  </div>
</div>

Answer 5

这是另一个非JQuery答案。

要获取下一个元素同级，请使用：

var nextElement = element.nextElementSibling;

要获取先前的元素同级，请使用：

var previousElement = element.previousElementSibling;

要获取元素索引，请使用：

var index = Array.prototype.slice.call(element.parentElement.children).indexOf(element);

如果您位于第一个元素，则previousElementSibling值将为null。

如果您位于最后一个元素，则nextElementSibling值将为null。

如何在Javascript中获取兄弟元素（div）？

5 个答案: