Как установить text () родительского элемента родительского элемента в jQuery? - PullRequest
Новая
       32

Как установить text () родительского элемента родительского элемента в jQuery?

0 голосов
/ 20 октября 2010

Я создаю собственное выпадающее меню в jQuery.Теперь я хотел бы установить текст элемента A.select равным тексту элемента, по которому щелкнули.Но я не могу заставить его работать.

Это HTML: 

<div class="pulldown">
    <a href="javascript:;" class="select">All cats/subs</a>
    <div class="options">
     <a href="javascript:;">Option one A</a>
     <a href="javascript:;">Option two A</a>
     <a href="javascript:;">Option three A</a>
        <a href="javascript:;">Option four A</a>
    </div>
</div>

Это код jQuery: 

$(document).ready(function() {
$('div.pulldown').toggle(function() {
    $(this).css('z-index','110');
    $('.options', this).css('z-index','100').show('fast');
    $('.options A', this).click(function(){
        var value = $(this).text();
        $(this).closest('DIV.pulldown A.select').text(value);
    });
}, function(){
    $(this).css('z-index','10');
    $('.options', this).css('z-index','0').hide('fast');
}); });

Чего мне здесь не хватает

Ответы [ 2 ]

0 голосов
/ 20 октября 2010

С вами будет легче работать, если вы немного очистите свой HTML: 

<dl class="menu">
    <dt class="topItem">All cats/subs</dt>
    <dd class="subItem">Option one A</dd>
    <dd class="subItem">Option two A</dd>
    <dd class="subItem">Option three A</dd>
</dl>

Тогда ваш jQuery сводится к следующему: 

$(function() {
    var $topItem = $('.topItem');
    var $subItems = $('.subItem');

    $topItem.bind('click', function() {
        $subItems.toggle();
    });

    $subItems.bind('click', function() {
        $topItem.text($(this).text());
        $subItems.toggle();
    });
});

Живая демонстрация может быть найдена на http://jsfiddle.net/c8Qp8/.

Обратите внимание, этот пример необходимо расширить, чтобы позаботиться о нескольких меню с несколькими подпунктами. Кроме того, вместо того, чтобы устанавливать свои свойства CSS с помощью JavaScript, вы должны установить их с помощью таблицы стилей.

0 голосов
/ 20 октября 2010

Вы должны установить глобальную переменную для всего div и использовать ее в качестве ссылки 

$(document).ready(function() {
    /*Grab the div into a variable*/
    var Pulldown = $('div.pulldown');

    /*Set up your event handlers*/
    $('.options a', Pulldown).click(function(){
        var value = $(this).text();
        $('.select',Pulldown).html(value);
    });

    /*Toggle the pulldown*/
    Pulldown.toggle(function() {
        Pulldown.css('z-index','110');
        $('.options', Pulldown).css('z-index','100').show('fast');
     }, function(){
         Pulldown.css('z-index','10');
         $('.options', Pulldown).css('z-index','0').hide('fast');
     });
});

Live Пример здесь:

http://jsfiddle.net/RYcr3/2/

...