Question

您好我在我的项目中使用javascript，当然是新手，在某种情况下，我想获取子元素的父元素的ID，以便我可以更改该子元素的css类仅

代码：

 <div id="section_container" class="col-md-3 section_container " onclick="handler(this)">
        <div id="content" class="col-md-10 leftone ">Make a complaint</div>
        <div class="rightone  col-md-2">
            <img id="arrow" class="arrow-image">
        </div>
    </div>
    <div id="section_container" class="col-md-3 section_container ">
        <div id="content" class="col-md-10 leftone ">Make a complaint</div>
        <div class="rightone  col-md-2">
            <img id="arrow" class="arrow-image">
            <a href="www.google.com" ></a>
        </div>
    </div>
    <div id="section_container" class="col-md-3 section_container ">
        <div id="content" class="col-md-10 leftone ">Make a complaint</div>
        <div class="rightone  col-md-2">
            <img id="arrow" class="arrow-image">
        </div>
    </div>

在这里，我有三个相同的div，我从中调用一个javascript函数处理程序，在处理程序中，我编写了代码来更改类，如果单击部分容器

问题：
因为有三个相同的元素section_container，我无法找到应该突出显示哪个元素（应该应用css类）。

带有ID的元素：content arrow和section_container获取新的clas。

问题：如何识别只有在已注册的点击时突出显示的div。

Answer 1

是ID必须是唯一的。我使用纯javascript w / o库

var elements = document.getElementsByClassName("section_container"),
  anIndex = 0;

if (elements && elements.length) {
  for (anIndex; anIndex < elements.length; anIndex++) {
    if (elements.hasOwnProperty(anIndex))
      elements[anIndex].addEventListener("click", cHandler);
  }
}

function cHandler(event) {
  for (anIndex = 0; anIndex < elements.length; anIndex++) {
    if (elements.hasOwnProperty(anIndex))
      elements[anIndex].classList.remove("highLight");
  }
  this.classList.add("highLight");
}

.highLight {
  background-color: red;
}

<div class="col-md-3 section_container ">
  <div id="content" class="col-md-10 leftone ">Make a complaint</div>
  <div class="rightone  col-md-2">
    <img id="arrow" class="arrow-image">
  </div>
</div>


<div class="col-md-3 section_container">
  <div id="content" class="col-md-10 leftone ">Make a complaint</div>
  <div class="rightone  col-md-2">
    <img id="arrow" class="arrow-image">
  </div>
</div>

Answer 2

请注意，您的ID应该是唯一的....您不能拥有多个具有相同ID的项目。但是，您应该能够添加代码

onclick="handler(this)"

所有三个要素。正如@Esko所提到的，请添加您的JS代码

Answer 3

你应该看看jQuery，它使得这非常简单，如下所示：

$('.section_container').on('click', function() {
    var $this = $(this);
    // First remove the new class from all the other sections
    $('.section_container').removeClass('extra-class');
    $('.section_container .content').removeClass('content-extra-class');
    // Then add it to just this one
    $this.addClass('extra-class');
    $this.find('.content').addClass('content-extra-class');
});

Answer 4

假设你的javascript中有一个名为handler的函数，你可以将点击的元素作为参数与this关键字一起使用，就像@Reflamer写的一样。

您可以使用classList属性来操纵元素所具有的类：

function handler(element) {
    element.classList.add("myFancyClass");
}

如果您想操纵元素的子元素，可以使用children attribute：

function handler(element) {
    let children = element.children;

    children.forEach(function(child) {
       if(child.className === "content") {
           child.classList.toggle("myFancyClass");
       }
    })
}

或使用Mozilla Developer Network

中描述的其他classList函数之一

Answer 5

function getSpecificChild(parent) {
    for (var i = 0; i < parent.children.length; i++) {
        if (parent.children[i].tagName.toLowerCase() === "button") {
            return el.children[i]
        }
    }
}

在这种情况下，我只使用tagName来标识button元素，但您可以使用任何其他JavaScript标识符来获取您的子元素

如何从javascript中的父元素获取特定的子元素

5 个答案: