親ボタンで子ボタンを変更する

親オブジェクトのみを参照してオブジェクトを変更する方法を学習しようとしています。この場合、私は3つのボタンが必要です。それは他の2つの親である。親ボタンをクリックすると、両方の子のテキストが変更されます。 jsFiddleでこれをしようと、私が持っている：JSと親ボタンで子ボタンを変更する

<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>

を：

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

私はsimilar postsを見てきましたが、私のために関連しているボタンを使用することのこの要件は、私を投げています。ボタンの要素が正しく設定されている場合（私はそれがわからない）、私は要素をクラスごとに取得する必要がありますか？ありがとう。

出典

2017-04-02 Alex R

スニペットにコードを移動してください。 –

最初に構文エラーがあります。それは '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

ありがとうございます。私が持っているプロンプトの表現方法は、親ボタンの内側にあるはずのボタンのように聞こえますが、それは不可能だと考えて解決します。とても有難い。 –

親ボタンで子ボタンを変更する

答えて

関連する問題