Question

方案是：我有td个，每个td都有不同的文字。我通过一个公共选择器将点击事件绑定到td。

当我点击td时，会出现一个下拉列表，p内td标记中的文字将更改为“已打开”。当我再次点击相同的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

您需要.each()通过每个p aragraphs并将文本值保存在变量中：

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

未完成的伪代码，但希望它有所帮助。

jquery根据td中的当前文本更改文本值

2 个答案: