javascript - 使用 JQuery 获取标题子级 div 的文本以替换不同的标题

Question

我正在尝试获取 event.target('h6.class') 的 .div('.child#') 子级的文本内容，并替换我的其他 header ('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...那么我该如何实现这一目标呢？

Answer 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() .