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

王小婷

发布于 2025-05-19 12:47:10

44500

代码可运行

文章被收录于专栏：编程微刊编程微刊

运行总次数：0

代码可运行

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

大致效果是这样的：

为了更好的呈现效果，这里放一个类似的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>