jQuery來改變基於當前文本的文本值在TD

Question

的情況是：我有幾個td S和每個td持有不同的文本。我通過通用選擇器將點擊事件綁定到td。

當我點擊td時，會出現一個下拉菜單，並且td內的p標籤中的文本將變爲「已打開」。當我再次點擊相同的td（它將包含文本「打開」）時，下拉將隱藏並且文本將變回原始值。

我相信我們需要得到一些全局變量文本的值或者你有任何其他的想法去實現它？

的結構如下：

$(document).ready(function() { 
$("#timeofday p").bind('click',function(event){ 
var read_txt= $(this).text(); 
$(this).text($(this).text() == 'opened' ? 'Click me' : 'Opened'); 
if(read_txt=='CLOSE') 
{ 
$(this).parent().find(" > .dropdown").hide(); 

} 
else 
{ 
    $("#timeofday .dropdown").not(this).slideUp(); 
    $("#timeofday p").not(this).text($("#timeofday p").text('Click me')); 
    $(this).parent().find(" > .dropdown").slideToggle();  

} 
}); 

的HTML如下：

<table border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td id="timeofday" class="avbltyltblue"> 
<p>Click me</p> 
<div id="dropdown" class="dropdown"> 
<div style="padding:10px 0"><button class="up" style="width:100px">UP</button></div> 

<ul class="tlist"> 
<li>1:00PM</li> 
<li>2:00PM</li> 
<li>3:00PM</li> 
<li>4:00PM</li> 
<li>5:00PM</li> 
<li>6:00PM</li> 
<li>7:00PM</li> 
<li>8:00PM</li> 
<li>9:00PM</li> 
<li>10:00PM</li> 
</ul> 

<div style="padding:10px 0"><button class="down" style="width:100px">DOWN</button></div> 
</div> 
</td> 
<td id="timeofday" class="avbltyltblue"> 
<p>test this</p> 

<div id="dropdown" class="dropdown"> 
<div style="padding:10px 0"><button class="up" style="width:100px">UP</button></div> 

<ul class="tlist"> 
<li>1:00PM</li> 
<li>2:00PM</li> 
<li>3:00PM</li> 
<li>4:00PM</li> 
<li>5:00PM</li> 
<li>6:00PM</li> 
<li>7:00PM</li> 
<li>8:00PM</li> 
<li>9:00PM</li> 
<li>10:00PM</li> 
</ul> 

<div style="padding:10px 0"><button class="down" style="width:100px">DOWN</button></div> 
</div> 
</td> 

</tr> 
<tr> 
<td id="timeofday" class="avbltyltblue" style="z-index:1"> 
<p>CLick again</p> 
<div id="dropdown" class="dropdown"> 
<div style="padding:10px 0"><button class="up" style="width:100px">UP</button></div> 

<ul class="tlist"> 
<li>1:00PM</li> 
<li>2:00PM</li> 
<li>3:00PM</li> 
<li>4:00PM</li> 
<li>5:00PM</li> 
<li>6:00PM</li> 
<li>7:00PM</li> 
<li>8:00PM</li> 
<li>9:00PM</li> 
<li>10:00PM</li> 
</ul> 

<div style="padding:10px 0"><button class="down" style="width:100px">DOWN</button></div> 
</div> 
</td> 
<td id="timeofday" class="avbltyltblue"> 
<p>mouse event</p> 

<div id="dropdown" class="dropdown"> 
<div style="padding:10px 0"><button class="up" style="width:100px">UP</button></div> 

<ul class="tlist"> 
<li>1:00PM</li> 
<li>2:00PM</li> 
<li>3:00PM</li> 
<li>4:00PM</li> 
<li>5:00PM</li> 
<li>6:00PM</li> 
<li>7:00PM</li> 
<li>8:00PM</li> 
<li>9:00PM</li> 
<li>10:00PM</li> 
</ul> 

<div style="padding:10px 0"><button class="down" style="width:100px">DOWN</button></div> 
</div> 
</td> 

</tr> 
</table> 

總之，如果我在「點擊我」下拉點擊會出現，當我再次點擊它，文本應該恢復到原始值，下拉菜單應該消失。

Answer 1

一種解決方案可能是設置元素的數據屬性存儲上點擊原文，然後將其設置回調用該屬性。

$(this).data('original-text', $(this).text()); // store original text 

$(this).data('original-text'); // retrieve original text 

Answer 2

你會通過p aragraphs每一個需要.each()並在變量保存文本值：

$('#some p').each(function() { 
    var p = $(this); 
    var oldText = p.text(); 
    var open = false; 

    p.click(function() { 
     if (open) { 
      p.text(oldText); 
      dropDown.hide(); 
      open = false; 
     } 
     else { 
      p.text('CLOSE'); 
      dropDown.show(); 
      open = true; 
     } 
    }); 
}); 

未完成的僞代碼，但希望它幫助。