点击按钮，新增输入框，再点击按钮，删除输入框

最新推荐文章于 2023-07-31 21:30:43 发布

祈澈菇凉

最新推荐文章于 2023-07-31 21:30:43 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/qq_36538012/article/details/100517884

本文介绍了一个前端实现按钮点击切换文本及元素显示隐藏的功能，通过jQuery操作DOM，改变按钮文本和背景颜色，同时控制输入框的显示与隐藏，提供了一个简单的交互效果示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：点击新增按钮的时候，会出现一个新增的输入框，按钮文字新增变成删除，再次点击删除按钮，出现的输入框隐藏，按钮文字变成新增字样。

大致效果是这样的：

为了更好的呈现效果，这里放一个类似的demo。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

		<style>
			#scale {
				background: blue;
				background-size: 100% 100%;
				width: 203px;
				height: 38px;
				color: #fff;
				border-radius: 2px;
				text-align: center;
				line-height: 35px;
			}
			
			#scroll {
				width: 140px;
				height: 20px;
				display: none;
				margin-top: 25px;
			}
		</style>
	</head>

	<body>
		<div class="row">
			<div class="col-md-12 col-sm-12  col-xs-12">
				<div class="form-group">
					<label class="col-md-4 col-sm-4  col-xs-4 control-label"></label>
					<div class="col-md-7 col-sm-7  col-xs-7">
						<div id="scale" style="">新增点位</div>
						<div id="scroll">
							<input type="text" class="single-slider" value="5" />
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		// 新增删除切换显示
		$("#scale").click(function() {
			var btnVal = $(this).text();
			$(this).text(btnVal === '新增点位' ? '删除点位' : '新增点位');
			$('#scroll').toggle();
			if(btnVal == '删除点位') {
				$('#scale').css("background", "blue")
			} else {
				$('#scale').css("background", "red")
			}
		});
	</script>
</html>