点击编辑按钮，编辑按钮下方的文本框变为可编辑

最新推荐文章于 2023-01-10 12:48:34 发布

gyuei

最新推荐文章于 2023-01-10 12:48:34 发布

阅读量3.7k

点赞数 2

分类专栏： JavaScript

本文链接：https://blog.csdn.net/gyueh/article/details/103070210

版权

JavaScript 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

当页面中存在多个编辑按钮与文本框时：点击当前编辑按扭对应的文本框变为可编辑状态，且当前点击的编辑按钮变为保存按钮

html部分代码如下：

<button class="edit_border">编辑</button>
<textarea  class="edit_contain" placeholder="请输入内容" value="" disabled="disabled"></textarea>

css部分代码如下：

/* 编辑按钮的绿色边框 */
.edit_border{
	display: inline-block;
	width: 94px;
	height: 20px;
	line-height: 16px;
	color: #03C28C;
	border-radius: 4px;
	border: 1px solid #03C28C;
	background-color: #FFFFFF;
}
/* 保存按钮的样式 */
.edit_bordered{
	color: #FFFFFF;
	background-color: #03C28C;
}
/* 内容不可编辑的按钮 */
.edit_contain{
	display: inline-block;
	width:94px;
	font-size: 14px;
	text-align: left;
	line-height: 16px;
	border-radius: 4px;
	padding: 4px 7px;
	margin-top: 4px;
	resize:none;
	overflow:hidden;
	color: #333333;
	background-color: #EFEFF4;
	border:1px solid #EFEFF4;
}
/* 内容可编辑的样式 */
.edit_contained{
	background: none;
	color: #333333;
	resize:none;
	border:1px solid #03C28C;
}

Js部分代码如下：

<script>
	var btns=document.getElementsByClassName("edit_border");
	var texts = document.getElementsByTagName("textarea");
	window.onload = function(){
		//点击编辑按钮，编辑按钮变为保存按钮
		for(var a = 0;a< btns.length;a++){
			btns[a].index = a;
			$(btns[a]).click(function() {
				if($(this).text() == '编辑') {
					$(this).text('保存');
					$(this).addClass("edit_bordered").siblings().attr("disabled", false).addClass('edit_contained').text('')
				}else {
					$(this).text('编辑');
					$(this).removeClass("edit_bordered").siblings().attr("disabled", true).removeClass('edit_contained');
				}
			})
		}
	}
</script>