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 相似，则代码运行良好。如果（例如）.child1and.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 回答