a.html id=100,【单选题】在网页中有一个id为content的div,下面( )正确设置它的宽度为200像素,高度为100像素,并且向左浮动 A. #content{width:200...

最新推荐文章于 2021-07-20 22:04:09 发布
转载 最新推荐文章于 2021-07-20 22:04:09 发布 · 706 阅读 · 0
文章标签：

#a.html id=100

该内容涉及网页设计，讲解如何使用CSS设置div元素的宽度、高度和浮动属性，以及网页布局的基本概念。问题涵盖CSS选择器、样式定义、布局技巧等知识点。

【单选题】在网页中有一个id为content的div,下面( )正确设置它的宽度为200像素,高度为100像素,并且向左浮动

A. #content{width:200px;height:100p

更多相关问题

[单选] 是开展工程监理活动时采用的基本方法，贯穿于工程项目的整个监理过程中。()

[单选] 在风险型决策的常用方法中，不仅可以处理单阶段决策问题，而且还可以处理决策表和决策矩阵无法表达的多阶段决策问题，这种方法是()。

[填空题] 仿词可以是()仿造，也可以是()或()仿造。前者叫做()，后者叫做()。

[问答题] 试述汉代画像石墓的分区。

[判断题] 税收的固定性是指在一定时期内税法是固定不变的。

[判断题] 沉降观测的观测方法视沉降观测的精度而定，有一、二、三、四等水准测量、三角高程测量等方法。常用的是水准测量方法。()

[多选] 工资率(劳动力价格)下降，将()

[多选] 当企业存在哪些不合格时，需要采取纠正措施：()。

[填空题] 某采用高本振方式工作的接收机，工作时，接收频率为435.250MHz，中频为21.4MHz，此时接收机本振工作在()频率。

[单选] ()要求资产评估必须由评估基准日，而且评估值就是评估基准日的资产价值。

[判断题] 对于高边坡滑坡、洞室坍塌、泥石流等重大危险，水利水电施工企业如采取了及时支护等预防措施，则不需安排专人巡视。

[判断题] 税收的固定性是指在一定时期内税法是固定不变的。

[单选] 根据《直流输电线路对电信线路危险影响防护设计技术规定》(DL/T5340-2006)，在直流输电线路极导线发生接地短路故障状态下，架空明线电信线路上感应产生的纵电动势或对地电压不应超过()V(峰值)。

[单选] 单层建筑工程可按()等划分检验批。

[单选] 盐酸克仑特罗临床用于()。

[填空题] 柴油罐322-TK-101ABCDEF的储存高度，平稳运行参数是()。

[填空题] 韵文中，为了易于上口，把韵母或韵尾相同或相近的字放在某些句子的末尾，这就叫()。这结韵母或韵尾相同或相近的字叫()或()。

[判断题] 催化剂使用末期较使用初期反应器压差低。

[单选] 盐酸克仑特罗临床用于()。

[单选] 俗语“头痛治头，脚痛治脚”反映了药物的什么性质()

[单选] 档案管理员应在接收到授信资料()内完成相应信贷档案立卷工作。

[多选] 工资率(劳动力价格)下降，将()

[单选] 单层建筑工程可按()等划分检验批。

[判断题] 沉降观测的观测方法视沉降观测的精度而定，有一、二、三、四等水准测量、三角高程测量等方法。常用的是水准测量方法。()

[单选] 根据《娱乐场所管理条例》，娱乐场所容纳的消费者超过核定人数的由()予以处罚。

[判断题] 当LKJ接收的机车信号中的制式信息或过绝缘节信息发生变化时，则LKJ记录事件“制式电平变化”。

[填空题] 柴油罐322-TK-101ABCDEF的储存高度，平稳运行参数是()。

[判断题] 国际物品编码组织分配给我们大陆的前缀码为691-696共计6个。

[单选] 以下哪款车型百公里加速性能最好()。

[判断题] 当LKJ收到过绝缘节信号，进行距离修正时，则LKJ记录事件“过机校正”。

[判断题] 当LKJ收到过绝缘节信号，进行距离修正时，则LKJ记录事件“过机校正”。

[多选] 机具设备：本工法所必需的主要施工()等的名称、规格、型号、性能、合理的配置数量以及能源消耗、调配计划和管理方法等。通常采用列表的方法。

[判断题] 当LKJ收到过绝缘节信号，进行距离修正时，则LKJ记录事件“过机校正”。

[单选] 剪刀撑的设置宽度()

[填空题] 《惨雾》的作者是()。

回忆宝箱
关注
第七章 CSS浮动与定位 A卷
qq_54879552的博客
12-29 2197
选择题。（每小题2分，共20分） 清除浮动的css写法不正确的是（A）。 A．clear:none B．clear:both C．clear:right D．clear:left 下面关于标准文档流的说法正确的是（A）。 A．display属性可以控制块级元素和内联元素的显示方式 B．<div>标签可以包含于<span>标签中 C．<div>……</div>标签是内联元素 D．标题标签、段落标签、<span>标签都是块级元素 在.
HTML、CSS基础题、练习题、面试题三
ZHANGJIN9546的博客
06-25 1万+
1.两个上下排列的div元素。上面的div设置margin-bottom:130px;下面的div设置margin-top:50px; 那么这两个之间的间距为（） A 180px B 130px C 50px D 80px 正确答案: B 解析: bfc排版逻辑规定。同属一个bfc里面的两个相邻的子元素上下之间的margin值会按照最大值去设置 2.将鼠标样式为手型的属性是（ ） A cros...
原生JS点击小图弹出大图代码
qq_41801219的博客
03-22 1921
今天给大家带来的是原生js实现的点击指定图片弹出大图可切换可关闭 代码中有注释 function switchh(){ var obox = document.getElementbyId("oobox"); var item = document.querySelectorAll(".oobox .obox_img"); var radius = document.quer...
web前端使用原生js实现图片点击弹出放大效果(无需插件)
刺心的博客
11-14 1903
HTML代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div> <img height="100...
HTML5 第1阶段第1周周考试题与解析
热门推荐
weixin_41860983的博客
10-16 2万+
HTML5 第1阶段第1周周考 答题限时:60分钟 满分:100分 合格分数:60分 一、单选题 1.下面关于外部样式表的说法错误的是 A . 文件扩展名为 .cs B .外部样式表内容不需要使用C .使用标签引入外部样式 D.使用外部样式表可以使网站更加简洁，风格保持统一 正确答案: A 解析:文件扩展名为 .css 2.在HTML中引入css内部样式表使用 A style B p C link D strong 正确答案: A 解析:内部样式表的语法 <style type="tex
document.addEventListener('DOMContentLoaded', function () { // 获取元素 const list = document.getElementById('list'); const addBtn = document.getElementById('addBtn'); const clearBtn = document.getElementById('clearBtn'); const saveBtn = document.getElementById('saveBtn'); const resetBtn = document.getElementById('resetBtn'); // 题目数据 let questions = JSON.parse(localStorage.getItem('questions')) || []; // 初始渲染 render(); // 添加题目 addBtn.addEventListener('click', function () { questions.push({ id: Date.now(), title: '', options: [ { id: 1, text: '', correct: false }, { id: 2, text: '', correct: false }, { id: 3, text: '', correct: false }, { id: 4, text: '', correct: false } ] }); saveRender(); }); // 清空题目 clearBtn.addEventListener('click', function () { if (confirm('确定要清空所有题目吗？此操作不可恢复！')) { questions = []; saveRender(); } }); // 保存题目 saveBtn.addEventListener('click', function () { localStorage.setItem('questions', JSON.stringify(questions)); alert('题目已成功保存！'); }); // 重置题目 resetBtn.addEventListener('click', function () { questions = JSON.parse(localStorage.getItem('questions')) || []; render(); alert('已恢复上次保存的内容'); }); // 列表点击事件 list.addEventListener('click', function (e) { if (!e.target.closest('.item')) return; const id = parseInt(e.target.closest('.item').dataset.id); const q = questions.find(item => item.id === id); // 删除题目 if (e.target.classList.contains('del-btn')) { if (confirm('确定要删除这道题目吗？')) { questions = questions.filter(item => item.id !== id); saveRender(); } } // 选择答案 if (e.target.classList.contains('sel-btn')) { const optId = parseInt(e.target.dataset.optId); q.options.forEach(opt => opt.correct = false); q.options.find(opt => opt.id === optId).correct = true; saveRender(); } // 添加选项 if (e.target.classList.contains('add-opt')) { const newId = q.options.length > 0 ? Math.max(...q.options.map(opt => opt.id)) + 1 : 1; q.options.push({ id: newId, text: '', correct: false }); saveRender(); } // 删除选项 if (e.target.classList.contains('del-opt')) { if (q.options.length <= 4) { alert('至少需要保留4个选项！'); return; } q.options.pop(); saveRender(); } }); // 输入处理 list.addEventListener('input', function (e) { if (!e.target.closest('.item')) return; const id = parseInt(e.target.closest('.item').dataset.id); const q = questions.find(item => item.id === id); // 题目输入 if (e.target.classList.contains('q-input')) { q.title = e.target.value; } // 选项输入 if (e.target.classList.contains('opt-input')) { const optId = parseInt(e.target.dataset.optId); const opt = q.options.find(item => item.id === optId); opt.text = e.target.value; } save(); }); // 保存数据 function save() { localStorage.setItem('questions', JSON.stringify(questions)); } // 保存并渲染 function saveRender() { save(); render(); } // 渲染题目 function render() { list.innerHTML = questions.map((q, idx) => { const opts = q.options.map(opt => ` <div class="opt"> <div class="opt-label">${String.fromCharCode(64 + opt.id)}</div> <input type="text" class="opt-input" placeholder="选项内容..." value="${opt.text}" data-opt-id="${opt.id}" > <button class="sel-btn" data-opt-id="${opt.id}" style="background: ${opt.correct ? '#28a745' : ''}" > ${opt.correct ? '✓ 已选' : '选择'} </button> </div> `).join(''); return ` <div class="item" data-id="${q.id}"> <div class="title"> <h4>题目 ${idx + 1}</h4> <button class="btn del-btn">删除</button> </div> <input type="text" class="q-input" placeholder="请输入题目内容..." value="${q.title}" > <div>${opts}</div> <div class="opt-ctrl"> <button class="btn add-opt">添加选项</button> <button class="btn del-opt">删除选项</button> </div> </div> `; }).join(''); } }); 将以上代码按照以下代码格式写 变量名不变 var left, right, bottom, prev, radioTit, contentList; var questionList = [], option = ‘’, timer = null; init() function init() { left = document.querySelector(‘.left’); right = document.querySelector(‘.right’); bottom = document.querySelector(‘.bottom’); radioTit = document.querySelector(‘.radio-tit’); contentList = document.querySelector(‘.content-list’); questionList = localStorage.questionList ? JSON.parse(localStorage.questionList) : []; right.addEventListener('click', rightClickHandler); radioTit.addEventListener('click', titClickHandler); contentList.addEventListener('click', listClickHandler); contentList.addEventListener('input', inputHandler); render(); } function rightClickHandler(e) { if (!/li/i.test(e.target.nodeName)) return; if (prev) prev.style.display = ‘none’ const option = e.target.className.match(/\w+(?=-)/)[0]; prev = document.querySelector(‘.’ + option); prev.style.display = ‘block’; } function titClickHandler(e) { if (!/button/i.test(e.target.nodeName)) return; if (e.target.className === ‘add’) { questionList.push({ question: ‘’, options: [‘’, ‘’, ‘’, ‘’], result: ‘’ }) localStorage.questionList = JSON.stringify(questionList); render(); } else { questionList.length = 0; localStorage.questionList = JSON.stringify(questionList); render(); document.querySelector(‘.radio’).style.display = ‘none’ } } function listClickHandler(e) { if (!e.target.classList.contains(‘btn’)) return const id = e.target.getAttribute(‘data’); if (e.target.classList.contains(‘content-delete’)) { questionList.splice(id, 1); localStorage.questionList = JSON.stringify(questionList); render(); } else if (e.target.classList.contains(‘select’)) { if (e.target.innerHTML === ‘选择’) { const result = e.target.getAttribute(‘name’); questionList[id].result = result; } else { questionList[id].result = ‘’; } localStorage.questionList = JSON.stringify(questionList); render() } else if (e.target.classList.contains(‘option-add’)) { questionList[id].options.push(‘’); localStorage.questionList = JSON.stringify(questionList); render(); } else if (e.target.classList.contains(‘option-delete’)) { if (questionList[id].options.length <= 4) { alert(‘至少保留4个选项’) } else { questionList[id].options.pop() localStorage.questionList = JSON.stringify(questionList); render(0) } } } function inputHandler(e) { if (timer) clearTimeout(timer); timer = setTimeout(() => { timer = null; const name = e.target.getAttribute(‘name’), id = e.target.getAttribute(‘data’); if (name === ‘question’) { questionList[id].question = e.target.value; } else { idx = e.target.getAttribute(‘name’) - 1; questionList[id].options[idx] = e.target.value; } localStorage.questionList = JSON.stringify(questionList); }, 500) } function render() { contentList.innerHTML = questionList.map((item, index) => { return <li> <div class="content-tit">单选题${index + 1}: <div class="content-delete btn" data="${index}">删除</div> </div> <div class="content-question"> <div class="question"> <label for="question">题目 :</label> <input name="question" type="text" value="${item.question}" data=${index}> </div>+ item.options.map((it, idx) => { return <div> <label for="${idx + 1}">${option = String.fromCharCode(idx + 65)}:</label> <input name="${idx + 1}" type="text" value="${it}" data=${index}> <div class="select btn" data="${index}" name="${option}">${item.result === option ? '√' : '选择'}</div> ${idx === item.options.length - 1 ? '<div class="option-add btn" data="' + index + '">添加</div><div class="option-delete btn" data="' + index + '">删除</div>' : ''} </div> }).join(‘’) + </div></li> }).join(‘’) }
08-04
- 每个选项：标签（A、B、C...）、输入框（name为选项序号，从1开始，但显示字母）、选择按钮（class="select btn"，如果当前选项是正确答案，则按钮显示“√”，否则显示“选择”）、以及最后一个选项后面有添加和...
document.addEventListener(‘DOMContentLoaded’, function () { // 获取元素 const list = document.getElementById(‘list’); const addBtn = document.getElementById(‘addBtn’); const clearBtn = document.getElementById(‘clearBtn’); const saveBtn = document.getElementById(‘saveBtn’); const resetBtn = document.getElementById(‘resetBtn’); // 题目数据 let questions = JSON.parse(localStorage.getItem(‘questions’)) || []; // 初始渲染 render(); // 添加题目 addBtn.addEventListener(‘click’, function () { questions.push({ id: Date.now(), title: ‘’, options: [ { id: 1, text: ‘’, correct: false }, { id: 2, text: ‘’, correct: false }, { id: 3, text: ‘’, correct: false }, { id: 4, text: ‘’, correct: false } ] }); saveRender(); }); // 清空题目 clearBtn.addEventListener(‘click’, function () { if (confirm(‘确定要清空所有题目吗？此操作不可恢复！’)) { questions = []; saveRender(); } }); // 保存题目 saveBtn.addEventListener(‘click’, function () { localStorage.setItem(‘questions’, JSON.stringify(questions)); alert(‘题目已成功保存！’); }); // 重置题目 resetBtn.addEventListener(‘click’, function () { questions = JSON.parse(localStorage.getItem(‘questions’)) || []; render(); alert(‘已恢复上次保存的内容’); }); // 列表点击事件 list.addEventListener(‘click’, function (e) { if (!e.target.closest(‘.item’)) return; const id = parseInt(e.target.closest(‘.item’).dataset.id); const q = questions.find(item => item.id === id); // 删除题目 if (e.target.classList.contains(‘del-btn’)) { if (confirm(‘确定要删除这道题目吗？’)) { questions = questions.filter(item => item.id !== id); saveRender(); } } // 选择答案 if (e.target.classList.contains(‘sel-btn’)) { const optId = parseInt(e.target.dataset.optId); q.options.forEach(opt => opt.correct = false); q.options.find(opt => opt.id === optId).correct = true; saveRender(); } // 添加选项 if (e.target.classList.contains(‘add-opt’)) { const newId = q.options.length > 0 ? Math.max(…q.options.map(opt => opt.id)) + 1 : 1; q.options.push({ id: newId, text: ‘’, correct: false }); saveRender(); } // 删除选项 if (e.target.classList.contains(‘del-opt’)) { if (q.options.length <= 4) { alert(‘至少需要保留4个选项！’); return; } q.options.pop(); saveRender(); } }); // 输入处理 list.addEventListener(‘input’, function (e) { if (!e.target.closest(‘.item’)) return; const id = parseInt(e.target.closest(‘.item’).dataset.id); const q = questions.find(item => item.id === id); // 题目输入 if (e.target.classList.contains(‘q-input’)) { q.title = e.target.value; } // 选项输入 if (e.target.classList.contains(‘opt-input’)) { const optId = parseInt(e.target.dataset.optId); const opt = q.options.find(item => item.id === optId); opt.text = e.target.value; } save(); }); // 保存数据 function save() { localStorage.setItem(‘questions’, JSON.stringify(questions)); } // 保存并渲染 function saveRender() { save(); render(); } // 渲染题目 function render() { list.innerHTML = questions.map((q, idx) => { const opts = q.options.map(opt => <div class="opt"> <div class="opt-label">${String.fromCharCode(64 + opt.id)}</div> <input type="text" class="opt-input" placeholder="选项内容..." value="${opt.text}" data-opt-id="${opt.id}" > <button class="sel-btn" data-opt-id="${opt.id}" style="background: ${opt.correct ? '#28a745' : ''}" > ${opt.correct ? '✓ 已选' : '选择'} </button> </div>).join(‘’); return <div class="item" data-id="${q.id}"> <div class="title"> <h4>题目 ${idx + 1}</h4> <button class="btn del-btn">删除</button> </div> <input type="text" class="q-input" placeholder="请输入题目内容..." value="${q.title}" > <div>${opts}</div> <div class="opt-ctrl"> <button class="btn add-opt">添加选项</button> <button class="btn del-opt">删除选项</button> </div> </div>; }).join(‘’); } }); 将以上代码按照以下代码格式写 按照上面的变量名写，只修改 JS部分，不用重新生成html和css var left, right, bottom, prev, radioTit, contentList; var questionList = [], option = ‘’, timer = null; init() function init() { left = document.querySelector(‘.left’); right = document.querySelector(‘.right’); bottom = document.querySelector(‘.bottom’); radioTit = document.querySelector(‘.radio-tit’); contentList = document.querySelector(‘.content-list’); questionList = localStorage.questionList ? JSON.parse(localStorage.questionList) : []; right.addEventListener(‘click’, rightClickHandler); radioTit.addEventListener(‘click’, titClickHandler); contentList.addEventListener(‘click’, listClickHandler); contentList.addEventListener(‘input’, inputHandler); render(); } function rightClickHandler(e) { if (!/li/i.test(e.target.nodeName)) return; if (prev) prev.style.display = ‘none’ const option = e.target.className.match(/\w+(?=-)/)[0]; prev = document.querySelector(‘.’ + option); prev.style.display = ‘block’; } function titClickHandler(e) { if (!/button/i.test(e.target.nodeName)) return; if (e.target.className === ‘add’) { questionList.push({ question: ‘’, options: [‘’, ‘’, ‘’, ‘’], result: ‘’ }) localStorage.questionList = JSON.stringify(questionList); render(); } else { questionList.length = 0; localStorage.questionList = JSON.stringify(questionList); render(); document.querySelector(‘.radio’).style.display = ‘none’ } } function listClickHandler(e) { if (!e.target.classList.contains(‘btn’)) return const id = e.target.getAttribute(‘data’); if (e.target.classList.contains(‘content-delete’)) { questionList.splice(id, 1); localStorage.questionList = JSON.stringify(questionList); render(); } else if (e.target.classList.contains(‘select’)) { if (e.target.innerHTML === ‘选择’) { const result = e.target.getAttribute(‘name’); questionList[id].result = result; } else { questionList[id].result = ‘’; } localStorage.questionList = JSON.stringify(questionList); render() } else if (e.target.classList.contains(‘option-add’)) { questionList[id].options.push(‘’); localStorage.questionList = JSON.stringify(questionList); render(); } else if (e.target.classList.contains(‘option-delete’)) { if (questionList[id].options.length <= 4) { alert(‘至少保留4个选项’) } else { questionList[id].options.pop() localStorage.questionList = JSON.stringify(questionList); render(0) } } } function inputHandler(e) { if (timer) clearTimeout(timer); timer = setTimeout(() => { timer = null; const name = e.target.getAttribute(‘name’), id = e.target.getAttribute(‘data’); if (name === ‘question’) { questionList[id].question = e.target.value; } else { idx = e.target.getAttribute(‘name’) - 1; questionList[id].options[idx] = e.target.value; } localStorage.questionList = JSON.stringify(questionList); }, 500) } function render() { contentList.innerHTML = questionList.map((item, index) => { return 单选题${index + 1}: 删除 题目 : ${item.question} + item.options.map((it, idx) => { return ${option = String.fromCharCode(idx + 65)}: ${it} ${item.result === option ? ‘√’ : ‘选择’} ${idx === item.options.length - 1 ? ‘ 添加 删除’ : ‘’} }).join(‘’) + </div></li> }).join(‘’) }
最新发布
08-04
但是，我们注意到原代码中有一个细节：在listClickHandler中，我们通过e.target.getAttribute('data')获取题目索引，而在render函数中，我们给每个按钮设置了data属性，值为题目索引。 另外，原代码中的题目数据...
<template> <div> <div class="search-title">查询条件</div> <div class="search-box"> <a-form-model :model="searchForm" layout="inline" ref="searchForm" class="searchForm"> <a-form-model-item label="题库名称" prop="title"> <a-input v-model="searchForm.title" placeholder="请输入题库名称" /> </a-form-model-item> <a-form-model-item class="searchButton"> <a-button type="primary" v-if="QX.read" @click="getSearch">查询</a-button> <a-button type="default" v-if="QX.read" @click="restSearch('searchForm')">重置</a-button> </a-form-model-item> </a-form-model> </div> <div class="table-operation"> <a-button type="primary" @click="addBank" icon="plus" v-if="QX.add">新增</a-button> </div> <a-table :columns="columns" :data-source="dataList" :pagination="false" :loading="loading" rowKey="questionBankId" :scroll="{ y: this.$getViewportSize().height - 300 }" > <span slot="action" slot-scope="text, record"> <a @click="editAuth(record)" v-if="QX.edit"><a-icon class="iconBtn" type="edit" />编辑</a> <a-divider v-if="QX.edit && QX.delete" type="vertical" /> <a-popconfirm title="确认是否删除？" ok-text="是" cancel-text="否" @confirm="removeBank(record)" > <a v-if="QX.delete"><a-icon class="iconBtn" type="delete" />删除</a> </a-popconfirm> </span> </a-table> <template slot="action" slot-scope="text, record, index"> <a @click="removeQuestion(index)">删除</a> </template> <a-pagination show-size-changer :total="totalPage" :current="pageIndex" :pageSize="pageSize" @showSizeChange="onShowSizeChange" @change="onChangePage" style="float: right; margin-top: 15px" /> <a-drawer :closable="true" :title="title" width="auto" :visible="visible" @close="visible = !visible" > <a-spin class="submitLoading" :spinning="submitLoading"> <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules" ref="form" class="lay-drawer-form"> <a-row> <a-col :span="12"> <a-form-model-item label="题库名称" prop="title"> <a-input v-model="form.title" :maxLength="25" placeholder="请输入题库名称" style="width: 380px" /> </a-form-model-item> </a-col> <a-col :span="12"> <a-form-model-item label="关联岗位" prop="positionId"> <a-select v-model="form.positionId" style="width: 380px" placeholder="请选择岗位"> <a-select-option v-for="(label, value) in positionDict" :key="value" :value="value"> {{ label }} </a-select-option> </a-select> </a-form-model-item> </a-col> <a-col :span="12"> <a-form-model-item label="参与PK" prop="participateInPk"> <a-switch v-model="form.participateInPk" :checkedValue="1" :unCheckedValue="0" /> </a-form-model-item> </a-col> </a-row> </a-form-model> <!-- 新增题目区域 --> <div class="question-batch"> <div style="margin: 20px 0; display: flex; justify-content: space-between; align-items: center;"> <a-button type="primary" @click="downloadTemplate">下载模板</a-button> <div class="import-add-buttons"> <a-upload name="file" :showUploadList="false" :beforeUpload="beforeUpload" accept=".xlsx,.xls" :disabled="!importEnabled" > <a-button :disabled="!importEnabled"><a-icon type="upload" /> 导入题目</a-button> </a-upload> <a-button type="dashed" @click="addTopicVisible = true" :disabled="!addEnabled" > <a-icon type="plus" /> 添加题目 </a-button> </div> </div> <!-- 题目列表容器添加样式 --> <div class="topic-list-container"> <!-- 题目列表 --> <div class="topic-grid"> <!-- 题目编号和内容 --> <div v-for="(topic, index) in topicList" :key="topic.topicId" class="topic-item"> <!-- 题目编号和内容 --> <div class="topic-content"> <strong>{{ index + 1 }}. {{ topic.content }}</strong> </div> <!-- 选项列表 --> <div class="options" v-if="topic.topicType === 1"> <label v-for="option in getOptions(topic)" :key="option.key"> <input type="radio" :name="'topic' + topic.topicId" :value="option.key" :checked="topic.correctAnswer === option.key" /> <!-- @change="checkAnswer(topic, option.key)"--> {{ option.key }}. {{ option.value }} </label> </div> <!-- 判断题 --> <div v-if="topic.topicType === 2" class="options"> <label> <input type="radio" :name="'topic' + topic.topicId" value="正确" :checked="topic.correctAnswer === '正确'" /> <!-- @change="checkAnswer(topic, '正确')"--> 正确 </label> <label> <input type="radio" :name="'topic' + topic.topicId" value="错误" :checked="topic.correctAnswer === '错误'" /> <!-- @change="checkAnswer(topic, '错误')"--> 错误 </label> </div> <!-- 删除按钮 --> <div class="topic-delete"> <a @click="removeQuestion(topic.topicId)"> <a-icon type="delete" /> 删除 </a> </div> </div> </div> <!-- 分页组件移到题目列表区域外面 --> <div class="pagination-wrapper"> <a-pagination v-model="topicPageNum" :pageSize="topicPageSize" :total="totalTopicCount" @change="handleTopicPageChange" style="text-align: right;" /> </div> </div> </div> <div :style="{ position: 'absolute', right: 0, bottom: 0, width: '100%', borderTop: '1px solid #e9e9e9', padding: '8px 16px', background: '#fff', textAlign: 'right', zIndex: 1, }"> <a-button type="default" @click="visible = !visible" > 取消 </a-button> <a-button type="primary" @click="submitForm" > 确认 </a-button> </div> </a-spin> </a-drawer> <!-- 新增题目抽屉 --> <a-drawer title="新增题目" :visible="addTopicVisible" @close="addTopicVisible = false" width="500" > <a-form-model :model="addTopicForm" layout="vertical" :rules="rulesForAddTopic" ref="addTopicFormRef"> <!-- 题目类型 --> <a-form-model-item label="题目类型" prop="topicType"> <a-select v-model="addTopicForm.topicType" style="width: 100%"> <a-select-option :value="1">选择题</a-select-option> <a-select-option :value="2">判断题</a-select-option> </a-select> </a-form-model-item> <!-- 题目内容 --> <a-form-model-item label="题目内容" prop="content"> <a-input v-model="addTopicForm.content" placeholder="请输入题目内容" /> </a-form-model-item> <!-- 选择题选项 --> <div v-if="addTopicForm.topicType === 1"> <a-form-model-item label="选项A" prop="optionA"> <a-input v-model="addTopicForm.optionA" placeholder="请输入选项A内容" /> </a-form-model-item> <a-form-model-item label="选项B" prop="optionB"> <a-input v-model="addTopicForm.optionB" placeholder="请输入选项B内容" /> </a-form-model-item> <a-form-model-item label="选项C" prop="optionC"> <a-input v-model="addTopicForm.optionC" placeholder="请输入选项C内容" /> </a-form-model-item> <a-form-model-item label="选项D" prop="optionD"> <a-input v-model="addTopicForm.optionD" placeholder="请输入选项D内容" /> </a-form-model-item> <a-form-model-item label="正确答案" prop="correctAnswer"> <a-select v-model="addTopicForm.correctAnswer" style="width: 100%"> <a-select-option value="A">A</a-select-option> <a-select-option value="B">B</a-select-option> <a-select-option value="C">C</a-select-option> <a-select-option value="D">D</a-select-option> </a-select> </a-form-model-item> </div> <!-- 判断题选项 --> <div v-if="addTopicForm.topicType === 2"> <a-form-model-item label="正确答案" prop="correctAnswer"> <a-select v-model="addTopicForm.correctAnswer" style="width: 100%"> <a-select-option value="正确">正确</a-select-option> <a-select-option value="错误">错误</a-select-option> </a-select> </a-form-model-item> </div> <div class="drawer-footer"> <a-button @click="addTopicVisible = false">取消</a-button> <a-button type="primary" @click="saveNewTopic">保存</a-button> </div> </a-form-model> </a-drawer> </div> </template> <script> import { req, fileDownload } from '../../../api/axiosFun'; import preventBack from 'vue-prevent-browser-back'; export default { name: 'Bank', mixins: [preventBack], data() { return { QX: {}, topicQX: {}, topicList: [], totalTopicCount: 0, // 题目总数 topicPageNum: 1, // 当前页码 topicPageSize: 10, // 每页数量 addTopicVisible: false, addTopicForm: { content: '', // 题目内容 topicType: 1, // 题目类型：1=选择题，2=判断题 optionA: '', optionB: '', optionC: '', optionD: '', correctAnswer: '', }, disabled: false, checkedKeys: [], selectAuth: [], treeData: [], positionDict: {}, title: '', labelCol: { span: 4 }, wrapperCol: { span: 20 }, tableHeight: 0, expanded: false, // 筛选条件是否展开 form: { questionBankId: 0, bankCode: '', title: '', positionId: '', participateInPk: true, }, isEdit: false, // 是否是编辑状态 isAdd: false, // 是否是新增状态 importEnabled: false, // 导入题目按钮是否可用 - 默认为不可用 addEnabled: false, // 添加题目按钮是否可用 - 默认为不可用 rules: { positionId: [ { required: true, message: '请选择岗位', trigger: 'blur' }, ], title: [ { required: true, message: '请输入题库名称', trigger: 'blur' }, ], }, rulesForAddTopic: { content: [ { required: true, message: '请输入题目内容', trigger: ['blur', 'change'] }, ], topicType: [ { required: true, message: '请选择题目类型', trigger: 'change' }, ], optionA: [ { required: (rule, value) => this.addTopicForm.topicType === 1, message: '选择题必须输入选项A', trigger: ['blur', 'change'], }, ], optionB: [ { required: (rule, value) => this.addTopicForm.topicType === 1, message: '选择题必须输入选项B', trigger: ['blur', 'change'], }, ], optionC: [ { required: (rule, value) => this.addTopicForm.topicType === 1, message: '选择题必须输入选项C', trigger: ['blur', 'change'], }, ], optionD: [ { required: (rule, value) => this.addTopicForm.topicType === 1, message: '选择题必须输入选项D', trigger: ['blur', 'change'], }, ], correctAnswer: [ { required: true, message: '请选择正确答案', trigger: 'change' }, ], }, searchForm: { title: '', }, visible: false, dataList: [], columns, loading: false, submitLoading: false, pageIndex: 1, pageSize: 10, totalPage: 0, ops: { vuescroll: {}, scrollPanel: {}, rail: { keepShow: true, }, bar: { hoverStyle: true, onlyShowBarOnScroll: false, // 是否只有滚动的时候才显示滚动条 background: '#F5F5F5', // 滚动条颜色 opacity: 1, // 滚动条透明度 'overflow-x': 'hidden', }, }, }; }, watch: { 'addTopicForm.topicType': function (newVal) { // 当题目类型变化时，触发相关字段的验证 this.$nextTick(() => { if (this.$refs.addTopicFormRef) { // 验证选项字段 if (newVal === 1) { this.$refs.addTopicFormRef.validateFields(['optionA', 'optionB', 'optionC', 'optionD']); } else { // 清除非必填字段的验证状态 this.$refs.addTopicFormRef.clearValidate(['optionA', 'optionB', 'optionC', 'optionD']); } } }); }, visible(newVal, oldVal) { if (!newVal) { this.restForm('form'); this.form.questionBankId = 0; this.checkedKeys = []; this.selectAuth = []; this.treeData = []; // 重置状态标志 this.isEdit = false; this.isAdd = false; } else { // 当抽屉打开时强制更新按钮状态 this.$nextTick(() => { this.$forceUpdate(); }); } }, }, mounted() { this.actionTitle = '操作'; this.getDict('position').then(res => { const dictMap = {}; res.data.forEach(item => { dictMap[item.dicValue] = item.dicDisplayName; }); this.positionDict = dictMap; }); this.getBankList(); }, methods: { // 获取字典数据方法 getDict(type) { return req('get', `/dict/getDictItemByNo`, { dicNo: type }) .then((res) => { if (res.result === 'success') { return res; } throw new Error(res.message || '获取字典数据失败'); }) .catch((error) => { console.error(`获取${type}字典失败:`, error); throw error; }); }, /* 新增题库 */ addBank() { this.visible = true; this.disabled = false; this.title = '新增题库'; // 获取功能权限树 req('get', '/bank/getTree', {}).then((res) => { this.treeData = res.data; }); // 初始化题目列表为空 this.topicList = []; this.totalTopicCount = 0; this.topicPageNum = 1; this.isEdit = false; // 不是编辑状态 this.isAdd = true; // 设置为新增状态 // 在新增状态下禁用导入和添加功能 this.importEnabled = false; this.addEnabled = false; // 强制更新按钮状态 this.$nextTick(() => { this.$forceUpdate(); }); }, // 查询 getSearch() { this.pageIndex = 1; this.getBankList(); }, /* 重置查询 */ restSearch(form) { this.restForm(form); this.pageIndex = 1; this.getBankList(); }, /* 删除题库 */ removeBank(record) { this.loading = true; req('post', '/bank/removeBQuestionBank', { questionBankId: record.questionBankId, }).then((res) => { this.loading = false; if (res.result === 'success') { this.$message.success(res.message); this.getBankList(); } }); }, downloadTemplate() { fileDownload('get', '/topic/downloadTemplate', null).then((res) => { const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', }); const link = document.createElement('a'); link.href = window.URL.createObjectURL(blob); link.download = '题库模板.xlsx'; link.click(); window.URL.revokeObjectURL(link.href); }).catch(() => { this.$message.error('下载失败'); }); }, beforeUpload(file) { // 显示加载状态 this.loading = true; const formData = new FormData(); formData.append('file', file); formData.append('questionBankId', this.form.questionBankId); // 添加 questionBankId 字段 req('post', '/topic/import', formData, { headers: { 'Content-Type': 'multipart/form-data', }, }) .then((res) => { // 隐藏加载状态 this.loading = false; if (res.result === 'success') { // 确保在DOM更新后再刷新题目列表 this.$nextTick(() => { // 刷新题目列表 this.getTopicList(this.form.questionBankId, this.topicPageNum, this.topicPageSize) .then(() => { this.$message.success('导入成功'); }) .catch(() => { this.$message.error('刷新题目列表失败'); }); }); } else { this.$message.error(res.message || '导入失败'); } }) .catch((error) => { // 隐藏加载状态 this.loading = false; this.$message.error('导入失败，请重试'); console.error('导入题目出错:', error); }); return false; // 阻止默认上传行为 }, // 获取题库下的题目列表（返回Promise以便链式调用） getTopicList(questionBankId, pageNum = 1, pageSize = 10) { return new Promise((resolve, reject) => { req('post', '/topic/list', { questionBankId, page: pageNum, rows: pageSize, }).then((res) => { if (res.result === 'success') { this.topicQX = res.QX; if (!this.topicQX.edit && !this.topicQX.delete) { this.hideAction(); } else { this.topicList = res.data.map((item, index) => ({ index: (pageNum - 1) * pageSize + index + 1, content: item.content, optionA: item.optionA, optionB: item.optionB, optionC: item.optionC, optionD: item.optionD, topicId: item.topicId, correctAnswer: item.correctAnswer, topicType: item.topicType, })); } // 更新总条数用于分页组件 this.totalTopicCount = res.page.totalResult; resolve(res); } else { this.$message.error(res.message || '获取题目列表失败'); reject(res); } }).catch((error) => { this.$message.error('获取题目列表失败'); reject(error); }); }); }, handleTopicPageChange(page) { this.topicPageNum = page; this.getTopicList(this.form.questionBankId, page, this.topicPageSize); }, // 获取选择题的选项 getOptions(topic) { if (topic.topicType === 1) { // 选择题：返回 A/B/C/D 选项 const options = []; if (topic.optionA) options.push({ key: 'A', value: topic.optionA }); if (topic.optionB) options.push({ key: 'B', value: topic.optionB }); if (topic.optionC) options.push({ key: 'C', value: topic.optionC }); if (topic.optionD) options.push({ key: 'D', value: topic.optionD }); return options; } else if (topic.topicType === 2) { // 判断题：直接返回 正确/错误 return [ { key: '正确', value: '正确' }, { key: '错误', value: '错误' }, ]; } return []; }, checkAnswer(topic, selectedAnswer) { // 仅记录用户选择的答案，不进行是否正确的判断 this.$set(topic, 'userAnswer', selectedAnswer); }, resetAddTopicForm() { this.addTopicForm = { content: '', topicType: 1, optionA: '', optionB: '', optionC: '', optionD: '', correctAnswer: '', }; }, saveNewTopic() { this.$refs.addTopicFormRef.validate((valid, fields) => { if (!valid) { console.log('表单验证失败:', fields); // 找出第一个错误字段并聚焦 const firstErrorField = Object.keys(fields).find(key => fields[key]); if (firstErrorField && this.$refs.addTopicFormRef) { const formItem = this.$refs.addTopicFormRef.$children.find( child => child.prop === firstErrorField, ); if (formItem && formItem.$el) { const input = formItem.$el.querySelector('input, select, textarea'); if (input) input.focus(); } } return; } // 验证通过，处理保存逻辑 const newTopic = { ...this.addTopicForm }; // 发送请求保存题目 req('post', '/topic/add', { questionBankId: this.form.questionBankId, optionA: newTopic.optionA, optionB: newTopic.optionB, optionC: newTopic.optionC, optionD: newTopic.optionD, correctAnswer: newTopic.correctAnswer, content: newTopic.content, topicType: newTopic.topicType, }).then((res) => { if (res.result === 'success') { this.$message.success('题目添加成功'); this.addTopicVisible = false; this.getTopicList(this.form.questionBankId); // 刷新题目列表 } else { this.$message.error(res.message || '保存失败'); } this.resetAddTopicForm(); }).catch((err) => { this.$message.error('网络异常，请重试'); }); }); }, /* 删除题库下的题目 */ removeQuestion(topicId) { this.$confirm({ title: '确认删除该题目？', content: '删除后将无法恢复', okText: '是', cancelText: '否', onOk: () => { req('post', '/topic/removeBTopic', { topicId, questionBankId: this.form.questionBankId, }).then((res) => { if (res.result === 'success') { this.$message.success(res.message); // 刷新题目列表 this.getTopicList(this.form.questionBankId, this.topicPageNum, this.topicPageSize); } else { this.$message.error(res.message || '删除失败'); } }); }, }); }, editAuth(record) { this.loading = true; req('post', '/bank/getBQuestionBank', { questionBankId: record.questionBankId, }).then((res) => { this.loading = false; if (res.result === 'success') { this.visible = true; this.disabled = true; this.title = '修改题库'; this.isEdit = true; // 设置为编辑状态 this.isAdd = false; // 不是新增状态 // 在编辑状态下启用导入和添加功能 this.importEnabled = true; this.addEnabled = true; // 强制更新按钮状态 this.$nextTick(() => { this.$forceUpdate(); }); const bank = res.data; this.$nextTick(() => { this.form.questionBankId = bank.questionBankId; this.form.title = bank.title; this.form.participateInPk = Boolean(bank.participateInPk); this.form.positionId = bank.positionId; this.treeData = bank.treeData; this.checkedKeys = bank.auths; // 获取题目列表 this.topicPageNum = 1; this.getTopicList(bank.questionBankId, this.topicPageNum, this.topicPageSize); }); } }); }, /* 保存or修改题库信息 */ submitForm() { this.$refs.form.validate((valid) => { if (valid) { this.form.participateInPk = this.form.participateInPk ? 1 : 0; const url = this.form.questionBankId ? 'edit' : 'add'; const selectAuth = this.selectAuth; this.form.selectAuth = JSON.stringify(selectAuth); this.submitLoading = true; req('post', `/bank/${url}`, this.form).then((res) => { if (res.result === 'success') { this.visible = false; this.getBankList(); // 如果是新增题库且成功，获取题目列表 if (!this.form.questionBankId && res.data && res.data.questionBankId) { this.form.questionBankId = res.data.questionBankId; this.topicPageNum = 1; this.getTopicList(res.data.questionBankId, this.topicPageNum, this.topicPageSize); // 新增成功后启用导入和添加功能 this.importEnabled = true; this.addEnabled = true; } this.$message.success(res.message); // 重置新增/编辑状态 this.isEdit = false; this.isAdd = false; } this.submitLoading = false; }); } }); }, /* 重置表单 */ restForm(form) { this.$refs[form].resetFields(); }, /* 改变页数事件 */ onChangePage(page, pageSize) { this.pageIndex = page; this.getBankList(); }, /* 改变每页显示条数 */ onShowSizeChange(current, pageSize) { this.pageIndex = 1; this.pageSize = pageSize; this.getBankList(); }, /* 题库信息列表 */ getBankList() { this.loading = true; this.searchForm.page = this.pageIndex; this.searchForm.rows = this.pageSize; req('post', '/bank/list', this.searchForm) .then((res) => { if (res.result === 'success') { this.dataList = res.data; this.QX = res.QX; // 无权限隐藏操作列 if (!this.QX.edit && !this.QX.delete) { this.hideAction(); } else if (columns[columns.length - 1].title != '操作') { columns.push(actionShow); } this.totalPage = res.page.totalResult; } this.loading = false; }).catch((error) => { this.loading = false; }); }, /* 无所有行操作权限时,隐藏操作栏 */ hideAction() { if (columns[columns.length - 1].title == '操作') { columns.splice(columns.length - 1, 1); } }, /* 校验代号类型 */ validCode(value) { if (value.length > 20) { value = value.slice(0, 20); } for (let i = value.length - 1; i >= 0; i--) { const unicode = value.charCodeAt(i); if (unicode > 65280 && unicode < 65375) { value = value.substr(0, i); } } this.value = value; }, }, }; const actionShow = { title: '操作', width: '200px', hide: true, dataIndex: 'action', key: 'action', align: 'center', scopedSlots: { customRender: 'action' }, }; const columns = [ { title: '序号', width: '50px', align: 'center', customRender: (text, row, index) => index + 1, }, { title: '题库名称', align: 'center', dataIndex: 'title', key: 'title', width: '120px', }, { title: '涉及岗位', align: 'center', dataIndex: 'positionName', key: 'positionName', width: '110px', }, { title: '题目数量', dataIndex: 'topicCount', key: 'topicCount', align: 'center', width: '180px', }, { title: '操作', width: '150px', hide: true, dataIndex: 'action', key: 'action', align: 'center', scopedSlots: { customRender: 'action' }, }, ]; </script> <style scoped> .topic-list-container { max-height: calc(100vh - 400px); /* 根据实际布局调整最大高度 */ overflow-y: auto; } .pagination-wrapper { position: sticky; bottom: 0; left: 0; right: 0; background: #fff; padding: 10px; z-index: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); margin-top: 15px; } .topic-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .topic-item { border: 1px solid #e8e8e8; padding: 15px; border-radius: 4px; position: relative; /* 为绝对定位的子元素提供定位上下文 */ } .topic-content { font-size: 16px; margin-bottom: 10px; } .options label { display: block; margin: 5px 0; font-size: 14px; } .options input[type="radio"] { margin-right: 5px; } /* 按钮禁用状态样式优化 */ .ant-upload.ant-upload-disabled .ant-upload-list, .ant-btn[disabled] { cursor: not-allowed; opacity: 0.5; } .topic-delete { position: absolute; top: 10px; right: 10px; } </style> <style scoped> @import "../../../assets/css/maincss.css"; </style> 在编辑页面中选择某个题目的选项后，再次打开该题时，默认显示的是上次选择的选项而不是正确答案。修改此问题
07-02
但是，这里有一个关键点：我们是在编辑题目，所以用户可能是在编辑题目本身（包括正确答案），但要求打开时显示的是他上次编辑时选择的选项（可能是他测试题目时选择的，或者之前编辑时选择的）。因此，我们需要保存...
将一下代码替换成简单一点的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } ul { list-style: none; } a { text-decoration: none; color: black; } .box { width: 1200px; height: 900px; margin: 8px; border-collapse: collapse; } .box>.left { float: left; width: 878px; height: 758px; padding: 20px; border: 1px solid #ccc; } .left>div { width: 100%; height: 100%; display: none; } .radio>.radio-tit { width: 98%; height: 50%; background: linear-gradient(to bottom, #ffffff 0, #ededed 100%); } </style> </head> <body> <div class="box"> <div class="left"> <div class="radio"> <div class="radio-tit line"> <span>单选题</span> <button class="delete">删除</button> <button class="add">添加</button> </div> <div class="radio-content"> <ul class="content-list"> </ul> </div> </div> </div> <div class="right"> <div class="right-tit line"> 栏目 </div> <div class="right-content"> <ul> <li class="radio-option">单选题</li> </ul> </div> </div> <div class="bottom"> <div class="submit">提交</div> <div class="reset">重新编辑</div> </div> </div> <script> // 定义全局变量 var left, right, bottom, prev, radioTit, contentList; var questionList = [], // 存储题目列表 option = '', // 临时存储选项字母 timer = null; // 防抖定时器 // 初始化函数 init() function init() { // 获取DOM元素 left = document.querySelector('.left'); // 左侧区域 right = document.querySelector('.right'); // 右侧区域 bottom = document.querySelector('.bottom'); // 底部区域 radioTit = document.querySelector('.radio-tit'); // 标题区域 contentList = document.querySelector('.content-list'); // 题目列表容器 // 从localStorage加载题目数据 questionList = localStorage.questionList ? JSON.parse(localStorage.questionList) : []; // 添加事件监听器 right.addEventListener('click', rightClickHandler); // 右侧区域点击 radioTit.addEventListener('click', titClickHandler); // 标题区域点击 contentList.addEventListener('click', listClickHandler); // 题目列表点击 contentList.addEventListener('input', inputHandler); // 题目列表输入 render(); // 渲染题目列表 } // 右侧区域点击处理 function rightClickHandler(e) { // 只处理li元素的点击 if (!/li/i.test(e.target.nodeName)) return; // 隐藏之前显示的面板 if (prev) prev.style.display = 'none'; // 获取点击元素的类名（去掉后缀） const option = e.target.className.match(/\w+(?=-)/)[0]; // 显示对应面板 prev = document.querySelector('.' + option); prev.style.display = 'block'; } // 标题区域点击处理 function titClickHandler(e) { // 只处理button元素的点击 if (!/button/i.test(e.target.nodeName)) return; // 添加按钮处理 if (e.target.className === 'add') { // 添加新题目到列表 questionList.push({ question: '', // 题目内容 options: ['', '', '', ''], // 选项（初始4个空选项） result: '' // 正确答案 }); // 保存到localStorage localStorage.questionList = JSON.stringify(questionList); render(); // 重新渲染 } // 清空按钮处理 else { questionList.length = 0; // 清空题目列表 localStorage.questionList = JSON.stringify(questionList); // 更新存储 render(); // 重新渲染 document.querySelector('.radio').style.display = 'none'; // 隐藏面板 } } // 题目列表点击处理 function listClickHandler(e) { // 只处理带有btn类的元素 if (!e.target.classList.contains('btn')) return; // 获取题目索引 const id = e.target.getAttribute('data'); // 删除题目按钮 if (e.target.classList.contains('content-delete')) { questionList.splice(id, 1); // 从数组中删除题目 localStorage.questionList = JSON.stringify(questionList); // 更新存储 render(); // 重新渲染 } // 选择答案按钮 else if (e.target.classList.contains('select')) { // 当前是"选择"状态 if (e.target.innerHTML === '选择') { const result = e.target.getAttribute('name'); // 获取选项字母 questionList[id].result = result; // 设置为正确答案 } // 当前是"√"状态（已选中） else { questionList[id].result = ''; // 清除正确答案 } localStorage.questionList = JSON.stringify(questionList); // 更新存储 render(); // 重新渲染 } // 添加选项按钮 else if (e.target.classList.contains('option-add')) { questionList[id].options.push(''); // 添加空选项 localStorage.questionList = JSON.stringify(questionList); // 更新存储 render(); // 重新渲染 } // 删除选项按钮 else if (e.target.classList.contains('option-delete')) { // 至少保留4个选项 if (questionList[id].options.length <= 4) { alert('至少保留4个选项'); } else { questionList[id].options.pop(); // 删除最后一个选项 localStorage.questionList = JSON.stringify(questionList); // 更新存储 render(); // 重新渲染 } } } // 输入处理（带防抖） function inputHandler(e) { // 清除之前的定时器 if (timer) clearTimeout(timer); // 设置新的定时器（500ms防抖） timer = setTimeout(() => { timer = null; const name = e.target.getAttribute('name'); // 输入项名称 const id = e.target.getAttribute('data'); // 题目索引 // 题目输入框 if (name === 'question') { questionList[id].question = e.target.value; // 更新题目内容 } // 选项输入框 else { const idx = e.target.getAttribute('name') - 1; // 选项索引 questionList[id].options[idx] = e.target.value; // 更新选项内容 } // 保存到localStorage localStorage.questionList = JSON.stringify(questionList); }, 500); } // 渲染题目列表 function render() { // 生成题目列表HTML contentList.innerHTML = questionList.map((item, index) => { return `<li> <div class="content-tit">单选题${index + 1}: <div class="content-delete btn" data="${index}">删除</div> </div> <div class="content-question"> <div class="question"> <label for="question">题目 :</label> <input name="question" type="text" value="${item.question}" data=${index}> </div>` + // 生成选项HTML item.options.map((it, idx) => { option = String.fromCharCode(idx + 65); // 生成选项字母(A,B,C...) return `<div> <label for="${idx + 1}">${option}:</label> <input name="${idx + 1}" type="text" value="${it}" data=${index}> <div class="select btn" data="${index}" name="${option}">${item.result === option ? '√' : '选择'}</div> ${idx === item.options.length - 1 ? `<div class="option-add btn" data="${index}">添加</div> <div class="option-delete btn" data="${index}">删除</div>` : ''} </div>`; }).join('') + `</div></li>`; }).join(''); } </script> </body> </html>
08-03
我将为你提供一个简化但功能完整的单选题管理系统，保留了原有功能但代码更简洁易读。 ## 简化思路 1. **结构简化**：减少不必要的嵌套，使用更直观的布局 2. **样式优化**：使用现代CSS特性（Flexbox）简化布局 3...
要求每句添加注释 var left, right, bottom, prev, radioTit, contentList; var questionList = [], option = '', timer = null; init() function init() { left = document.querySelector('.left'); right = document.querySelector('.right'); bottom = document.querySelector('.bottom'); radioTit = document.querySelector('.radio-tit'); contentList = document.querySelector('.content-list'); questionList = localStorage.questionList ? JSON.parse(localStorage.questionList) : []; right.addEventListener('click', rightClickHandler); radioTit.addEventListener('click', titClickHandler); contentList.addEventListener('click', listClickHandler); contentList.addEventListener('input', inputHandler); render(); } function rightClickHandler(e) { if (!/li/i.test(e.target.nodeName)) return; if (prev) prev.style.display = 'none' const option = e.target.className.match(/\w+(?=-)/)[0]; prev = document.querySelector('.' + option); prev.style.display = 'block'; } function titClickHandler(e) { if (!/button/i.test(e.target.nodeName)) return; if (e.target.className === 'add') { questionList.push({ question: '', options: ['', '', '', ''], result: '' }) localStorage.questionList = JSON.stringify(questionList); render(); } else { questionList.length = 0; localStorage.questionList = JSON.stringify(questionList); render(); document.querySelector('.radio').style.display = 'none' } } function listClickHandler(e) { if (!e.target.classList.contains('btn')) return const id = e.target.getAttribute('data'); if (e.target.classList.contains('content-delete')) { questionList.splice(id, 1); localStorage.questionList = JSON.stringify(questionList); render(); } else if (e.target.classList.contains('select')) { if (e.target.innerHTML === '选择') { const result = e.target.getAttribute('name'); questionList[id].result = result; } else { questionList[id].result = ''; } localStorage.questionList = JSON.stringify(questionList); render() } else if (e.target.classList.contains('option-add')) { questionList[id].options.push(''); localStorage.questionList = JSON.stringify(questionList); render(); } else if (e.target.classList.contains('option-delete')) { if (questionList[id].options.length <= 4) { alert('至少保留4个选项') } else { questionList[id].options.pop() localStorage.questionList = JSON.stringify(questionList); render(0) } } } function inputHandler(e) { if (timer) clearTimeout(timer); timer = setTimeout(() => { timer = null; const name = e.target.getAttribute('name'), id = e.target.getAttribute('data'); if (name === 'question') { questionList[id].question = e.target.value; } else { idx = e.target.getAttribute('name') - 1; questionList[id].options[idx] = e.target.value; } localStorage.questionList = JSON.stringify(questionList); }, 500) } function render() { contentList.innerHTML = questionList.map((item, index) => { return `<li> <div class="content-tit">单选题${index + 1}: <div class="content-delete btn" data="${index}">删除</div> </div> <div class="content-question"> <div class="question"> <label for="question">题目 :</label> <input name="question" type="text" value="${item.question}" data=${index}> </div>`+ item.options.map((it, idx) => { return `<div> <label for="${idx + 1}">${option = String.fromCharCode(idx + 65)}:</label> <input name="${idx + 1}" type="text" value="${it}" data=${index}> <div class="select btn" data="${index}" name="${option}">${item.result === option ? '√' : '选择'}</div> ${idx === item.options.length - 1 ? '<div class="option-add btn" data="' + index + '">添加</div><div class="option-delete btn" data="' + index + '">删除</div>' : ''} </div>` }).join('') + `</div></li>` }).join('') }
08-03
在添加选项时，新选项被添加，但正确答案没有变化，如果正确答案是之前设置的，那么它仍然有效，因为正确答案存储的是字母（如'A'），而新添加的选项会排在后面（比如原本有4个选项，再添加一个，新选项为E），所以...
7-8章节测试
security.blog.cndn.net
05-24 1496
1.( 单选题 | 2 分) 在 CSS 语言中下列哪一项是设置"左边框"的语法？（ ） A.border-left-width: <值> B.border-top-width: <值> C.border-left: <值> D.border-top-width: <值> 正确答案： C 你的答案： C查看知识点 | 查看解析 2.( 单选题 | 2 分) 下列( )是CSS 属性可以更改样式表的字体颜色。 A.text-color= B.fg
网页制作 第7、8单元测试
Long_UP的博客
05-31 2573
第7和第8单元测试 第8周 CSS布局与网页美化-2 在 CSS 语言中下列哪一项是设置"左边框"的语法？（ ） A.border-left-width: <值> B.border-top-width: <值> C.border-left: <值> D.border-top-width: <值> 正确答案： C 下列( )是CSS 属性可以更改样式表的字体颜色。 A.text-color= B.fgcolor: C.text-color: D
网页制作 第六章测试
Long_UP的博客
06-05 2722
第1部分 总题数: 5 【单选题】 (2分) 下面选项中，( )可以设置网页中某个标签的右外边距为10像素。 A. margin:10px 0 0 0; B. padding-right:10px; C. margin:0 10px; D. margin:0 10 0 0px; 本题总得分2分 【单选题】 (2分) 阅读下面HTML代码，如果期望tabs位于box容器的右下角，则需要添加的CSS样式是( )。 A. #box { position:relative; } #tabs
实现一个div，左边固定div宽度200px，右边div自适应
xiaobing_hope的专栏
11-01 1万+
实现一个div，左边固定div宽度200px，右边div自适应<div class= "container"> <div class="left"></div> <div class="rigth"></div> </div><style> /*方法一： BFC(块级格式化上下文)*/ .container{ width:10
JavaScript从入门到精通
袅袅青烟散的博客
12-16 1786
目录第一课 初探JavaScript魅力-01 第一课 初探JavaScript魅力-02 函数传参第一课 初探JavaScript魅力-01 JavaScript是什么 如今我们打开一个大型的网站，都会有很多JS效果的功能和应用。对于学过CSS+HTML的同学，即使是像淘宝那样的网站，用一两天时间也可以将布局写出来。但对于一个网页来说，除去CSS，HTML这样描述静态布局的元素外，还有诸如
007day（考试）
w296932099的博客
07-20 3412
阿斯顿dasd 一、测试 单选（每题2分，共30题） 1.在HTML中，实现鼠标悬停在超链接上时，为无下划线的效果 A：a{text-decoration:underline} B：a{text-decoration:none} C：a:hover{text-decoration:none} D：a:link{text-decoration:underline} 2.阅读下面HTML代码，段落标签<p>内文本最终显示的颜色是 <...
html设置模块宽度为200像素,css 宽度(CSS width)
weixin_30424461的博客
06-16 2026
DIV CSS宽度width样式属性CSS宽度是指通过CSS 样式设置对应div宽度，以下我们了解传统html宽度、宽度自适应百分比、固定宽度等宽度知识。传统Html 宽度属性单词：width如width="300";CSS 宽度属性单词：width 如width:300px;一、Width语法结构知识： - TOP.divcss5{Width:200px}设置divcss5类宽度为2...
Menu
CF1402345274的博客
11-18 411
1112 vue-Cascader 主要讲 1117 权限菜单 当老师学生以不同的身份进入到系统的时候，展示的菜单是不一样的。 手动配置 重要的事： muneList:[{pid:-1,name:“购物车”,id:1,auth:“cart”}] 讲 node.js 的东西 安装 express 跨域的问题，什么是跨域 http 就是协议 async 一定要学会使用箭头函数 这段时间都是练习 递归 :index=“index.to.String()” 变成字符串的数字 vue-menu 手动配置模板 b
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值