如何在jQuery中設置元素的父級的父級文本（）？

我正在jQuery中構建一個自定義下拉菜單。現在我想將A.select元素的文本設置爲單擊元素的文本。但我無法讓它工作。如何在jQuery中設置元素的父級的父級文本（）？

這是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'); 
}); });

缺少什麼我在這裏？

來源

2010-10-20 Webbiker

那裏的toggle（）函數是什麼？在我看來，在每一個toggle（）之後，你都要設置一個新的click（）處理函數。這看起來不正確。你有沒有把console.log（）轉到$（this）.text（）的內容，以確保你確實找到了正確的東西？在我看來，在開始進一步診斷問題之前，您必須回答這兩個問題。 – 2010-10-20 15:03:13

這將是更容易，如果你的清潔工作你的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/找到。

請注意，此示例需要展開以處理具有多個子項目的多個菜單。另外，不要用JavaScript來設置CSS屬性，而應該用樣式表設置它們。

來源

2010-10-20 15:12:27

謝謝@jsumners。你的代碼看起來更乾淨。我會放手一搏！ – Webbiker 2010-10-21 06:56:38

您應該設置一個全局變量整個股利和使用，作爲一個參考

$(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'); 
    }); 
});

活生生的例子在這裏：

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

來源

2010-10-20 15:03:38 RobertPitt

但他絕對應該**不要在「切換」代碼中爲錨點重新建立「點擊」處理程序。 – Pointy 2010-10-20 15:15:12

更新，好點。 – RobertPitt 2010-10-20 15:42:43

如何在jQuery中設置元素的父級的父級文本（）？

回答

相關問題