1

event.target（'h6.class'）の.div（'。child＃'）子のテキストコンテンツを取得し、このスクリプトを使用して他のヘッダー（'h1.replacHeader＃'）を置き換えようとしています。下...

$('h6.HeaderToBeClicked').click(function(event) { 
    var $target = $(this);
    $('.replaceHeader1').replaceWith("<h1 class='replaceHeader1'>" + $target.children(".child1").text() + "</h1>");
    $('.replaceHeader2').replaceWith("<h1 class='replaceHeader2'>" + $target.children(".child2").text() + "</h1>");
    });

});

HTML:
<div id="ReplaceTheseHeaders">
    <h1 class='replaceHeader1'></h1>
    <h1 class='replaceHeader2'></h1>
</div>
<div id="accordian" class="acc">
    <?php $counter = 1; ?>
    <?php foreach ($tmpl->vars as $var) { ?>
    <h6 class="HeaderToBeClicked"><a href="#">
    <div class="counter"><?php print $counter . "." ?></div>
        <div class="child1"><?php print $var['title'];?></div>
    <div class="child2"><?php print $var['name'];?></div>
    </a></h6>
<?php $counter = $counter+1; ?>
    <?php } ?>
</div>

.text（）がevent.targetに適用されないように見えることに気づきました...では、どうすればこれを達成できますか？

4

1 に答える 1

1

要素$targetを参照することを意図している場合は、次の行を変更する必要があります。h6.class

var $target = $(event.target);

これに：

var $target = $(this);

$(event.target)実際には、クリックされた子孫要素を参照します。次に、イベントは、h6.classで参照されるハンドラー（）を持つ要素にバブルアップし$(this)ます。

編集：

これがHTMLに似ている場合、コードは完全に実行されます。（たとえば）.child1そして.child2がより深くネストされているh6.class場合は、少し変更する必要があります。

<h6 class='class'>
    <div class='child1'>this is child 1</div>
    <div class='child2'>this is child 2</div>
</h6>

<div class="replaceHeader1">header1</div>
<div class="replaceHeader2">header2</div>
<div class="replaceHeader1">header1</div>
<div class="replaceHeader2">header2</div>

編集2：

投稿したHTMLを前提として、以下のコードを試してください。要素の終了タグがないように見えることに注意してください<a href="#">。ただし、以下のコードはどちらの方法でも機能するはずです。

$('h6.HeaderToBeClicked').click(function(event) { 
    var $target = $(this);
    $('.replaceHeader1').text( $target.find(".child1").text() );
    $('.replaceHeader2').text( $target.find(".child2").text() );
});

.replaceHeaderこれは、要素のコンテンツを変更するだけであることを前提としています。タグ名も変更する必要がある場合は、の使用に戻る必要がありますreplaceWith()。

于 2010-05-16T02:15:10.257 に答える