Использование JQuery для получения текста div, который является дочерним для заголовка, для замены другого заголовка - PullRequest
Новая
       12

Использование JQuery для получения текста div, который является дочерним для заголовка, для замены другого заголовка

1 голос
/ 16 мая 2010

Я пытаюсь получить текстовое содержимое дочернего элемента .div ('. Child #') моего event.target ('h6.class') и заменить другие мои заголовки ('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 ... Итак, как я могу добиться этого?

1 Ответ

1 голос
/ 16 мая 2010

Если $target предназначен для ссылки на элемент h6.class, то вам следует изменить эту строку: 

var $target = $(event.target);

к этому: 

var $target = $(this);

$(event.target) будет фактически ссылаться на любой элемент-потомок, по которому щелкнули Затем событие всплывает до элемента с обработчиком (h6.class), на который ссылается $(this).

EDIT:

Если это похоже на ваш 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().

...