Javascript 单击其他元素时恢复以前的值
我有多个元素,每个元素都是一个平铺,每个元素中都有文本,当用户单击每个平铺时,它会更改文本。我有一个JavaScript函数来处理这个问题,它可以工作,但我想让它在一次只有一个互动程序可以有更改的文本。单击下一个元素时,上一个元素应返回默认文本。下面是我的代码。P标记中的文本是默认文本Javascript 单击其他元素时恢复以前的值,javascript,jquery,onclick,Javascript,Jquery,Onclick,我有多个元素,每个元素都是一个平铺,每个元素中都有文本,当用户单击每个平铺时,它会更改文本。我有一个JavaScript函数来处理这个问题,它可以工作,但我想让它在一次只有一个互动程序可以有更改的文本。单击下一个元素时,上一个元素应返回默认文本。下面是我的代码。P标记中的文本是默认文本 <div class="page" title="Page 2" onClick="changeText('Some text blah blah blah.','home-grid-one-one')"
<div class="page" title="Page 2" onClick="changeText('Some text blah blah blah.','home-grid-one-one')">
<p>Understandable</p>
<div class="page" title="Page 2" onClick="changeText('Some different text blah blah blah.','home-grid-one-two')">
<p>Measurable</p>
function changeText(text, ele) {
var display = document.getElementById(ele);
display.style.textAlign = "center";
display.style.fontSize = "1em";
display.innerHTML = text;
}
可以理解
可衡量的
函数更改文本(文本,元素){
var display=document.getElementById(ele);
display.style.textAlign=“中心”;
display.style.fontSize=“1em”;
display.innerHTML=文本;
}
我想提出一个简单的解决方案数据属性的使用。
瓷砖:
<p class='tile' data-default="The default text 1 here" data-clicked="Text to be replaced">The default text 1 here</p>
<p class='tile' data-default="The default text 2 here" data-clicked="Text to be replaced">The default text 2 here</p>
<p class='tile' data-default="The default text 3 here" data-clicked="Text to be replaced">The default text 3 here</p>
如果替换文本中包含HTML,请使用
.HTML()
而不是.text()
您的元素没有id
s,而您的onclick
s只是挂在那里。您的代码有点凌乱,你能用onClick在某个元素中粘贴正确的代码,而不是把它放在空气中吗?@Andy changeText函数中的第二个参数是元素ID,onClick方法在元素中。它目前的作品,但我能够改变在每个元素的文本,但我想只有一个是活跃的在同一时间time@pavon147好的,谢谢。我现在已经准确地更新了我刚才键入的答案。@Andy我用过这个,但每次单击第一个p标记时,它都会更改文本,但会在第二个p标记中显示第一个p标记的数据默认值p标签
$('.tile').click(function(e) { // when the tile is clicked
$('.tile').not(this).text($(this).attr('data-default')); // Except the clicked tile all are restored to default data
$(this).text($(this).attr('data-clicked')); // The clicked tile gets the replacer text
});