天青色的骑士 2021-04-04 20:47 采纳率: 80%
浏览 279
已采纳

html 实现问卷星排序题

有实现过或知道怎么做的求教，没找到类型的博客。急！

  • 写回答

4条回答 默认 最新

  • 天际的海浪 2021-04-04 23:18
    关注

    是这样吗

    <!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
.pbox {
	margin: 2px;
	border: 1px solid #eee;
}
.pbox .num {
	margin: 2px;
	text-align: center;
	vertical-align: middle;
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 1px solid #999;
}
.pbox.checked {
	border: 1px solid #99F;
	background-color: #ccf;
}
.pbox.checked .num {
	border: 1px solid #ff0;
	background-color: #ff9;
}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>

<div class="pbox"><span class="num"></span>选项A</div>
<div class="pbox"><span class="num"></span>选项B</div>
<div class="pbox"><span class="num"></span>选项C</div>
<div class="pbox"><span class="num"></span>选项D</div>
<div class="pbox"><span class="num"></span>选项E</div>
<div class="pbox"><span class="num"></span>选项F</div>

<script type="text/javascript">
$(function(){
	var pbox = $(".pbox");
	var ae = [];
	pbox.click(function(event){
		$(this).toggleClass("checked");
		if ($(this).hasClass("checked")) {
			ae.push(this);
		} else {
			ae.splice(ae.indexOf(this),1);
			$(".num",this).text("");
		}
		ae.forEach(function(v, i){
			$(".num",v).text(i+1);
		});
	});
});
</script>

</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题？

悬赏问题

  • ¥15 关于#python#的问题，请各位专家解答！
  • ¥15 对于这个问题的解释说明
  • ¥200 询问：python实现大地主题正反算的程序设计，有偿
  • ¥15 smptlib使用465端口发送邮件失败
  • ¥200 总是报错，能帮助用python实现程序实现高斯正反算吗？有偿
  • ¥15 对于squad数据集的基于bert模型的微调
  • ¥15 为什么我运行这个网络会出现以下报错？CRNN神经网络
  • ¥20 steam下载游戏占用内存
  • ¥15 CST保存项目时失败
  • ¥20 java在应用程序里获取不到扬声器设备