用父按钮更改子按钮

我正试图学习如何通过仅引用父对象来更改对象。在这种情况下，我需要三个按钮;一个是另外两个的父亲。当我点击父母按钮时，两个孩子的文字都应该改变。在尝试的jsfiddle这个，我有：用父按钮更改子按钮

<body> 

<button class="parent" id="btn1">Parent button 
    <button class="child" id="childbtn1">child 1</button> 
    <button class="child" id="childbtn2">child 2</button> 
</button> 

</body>

与JS：

document.getElementByClassName("parent").addEventListener('click', 
function() { 
    $("btn1.child").innerHTML="new text"; 
});

我已经看了similar posts，但对我来说这要求必须使用被抛出我送行相关按钮。如果按钮元素设置正确（我不知道它们是否是），我应该通过id还是通过班级获取元素来更改孩子？谢谢。

来源

2017-04-02 Alex R

请将你的代码片段。 –

首先你有一个syntaxt错误，它是'getElementsByClassName'，其次它会返回一个集合，而不是元素，所以你需要指定索引并且你的标记是非常错误的 – Roljhon

您不能将按钮放在按钮内。如果您打开检查模式，您会注意到孩子从父母按钮中弹出。所以，如果你想将它们改为div，它就可以正常工作。此外，我将您的代码转换为jQuery，因为您将问题标记为jQuery。

$(".parent").click(function() { 
 
    $(this).find(".child").html("new text"); 
 
});

div { 
 
    padding:30px; 
 
    cursor:pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent" id="btn1">Parent button 
 
    <div class="child" id="childbtn1">child 1</div> 
 
    <div class="child" id="childbtn2">child 2</div> 
 
</div>

来源

2017-04-02 18:23:33 Neil

谢谢。我提示的方式是措辞，听起来像按钮应该在父按钮内，但是考虑到这是不可能的，这会清除事情。非常感激。 –

用父按钮更改子按钮

回答

相关问题