天青色的骑士 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 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像，如何解决？
  • ¥15 求daily translation（DT）偏差订正方法的代码
  • ¥15 js调用html页面需要隐藏某个按钮
  • ¥15 ads仿真结果在圆图上是怎么读数的
  • ¥20 Cotex M3的调试和程序执行方式是什么样的？
  • ¥20 java项目连接sqlserver时报ssl相关错误
  • ¥15 一道python难题3
  • ¥15 牛顿斯科特系数表表示
  • ¥15 arduino 步进电机
  • ¥20 程序进入HardFault_Handler