单击另一个元素时恢复上一个值
Restore Previous value when another element is clicked
我有多个元素,每个元素都是一个磁贴,每个元素中都有文本,当用户单击每个磁贴时,它会更改文本。我有一个JavaScript函数来处理这个问题,它很有效,但我想让它一次只能有一个tile更改文本。单击下一个元素时,上一个元素应返回到默认文本。下面是我的代码。P标记中的文本是默认文本。
<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;
}
我想提出一个简单的解决方案数据属性的使用
瓷砖:
<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>
jQuery:
$('.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
});
如果替换文本中包含HTML,请使用.html()
而不是.text()
相关文章:
- 单击按钮后如何逐个调用分区,上一个分区将隐藏
- 如何将值传递到上一个html页面
- Javascript获取上一个元素的内容
- 禁用旋转木马中的下一个按钮和上一个按钮
- 引用vue.js中v-for中的上一个值
- DOM导航-上一个同级未定义
- 构建JS测试,警报窗口重复上一个Q,而不是问下一个Q
- 如何在用户返回和上一个按钮时刷新下拉列表
- 删除“;上一个“;以及“;下一个“;基于当前幻灯片
- 简单的垂直上一个和下一个按钮代码点击上下移动jQuery
- HTML5历史记录-返回上一个完整页面按钮
- 算法:从数组(javascript/angular)中按当前日期获取上一个和下一个事件
- 如何选择给定类的上一个元素
- 用键盘分页jQuery下一个和上一个控件.触发器('点击')不'不起作用
- 如何使请求等待上一个请求完成
- 当我单击下一个或上一个按钮时,datatable显示旧值
- 如何防止在提交表单后恢复到上一个选项卡
- 如何恢复窗口,而不是打开一个新的窗口,如果它有相同的url(仍然从上一个打开)
- 单击另一个元素时恢复上一个值
- 验证输入字段并恢复上一个有效值