day07.Topic-add 添加题目

心得：

• 一般网络传输参数用简单的一个字符，或者0，1；提高传递效率
• 联想SpringMVC接收传递参数，数组类型等

1、添加题目的实现

topic-add.html文件在前端显示页面，请求传递给TopicController进行保存添加题目

2、在为选项设置 “ture”/“false”时遇到的问题

问题：

在使用传统方法，选择复选框携带`value="yes"`参数，出现图二中的几种情况，无法一一对应到选项(option)是ture/false

解决方法：

。。。JS看不懂。

 <div class="option-list">
        <div class="option">
            <span class="content">
                <input type="text" name="content" placeholder="选项内容">
            </span>
            <span class="key">
                <input type="hidden" name="isKey" value="false">
                <input type="checkbox">答案
            </span>
        </div>
        <div class="option">
            <span class="content">
                <input type="text" name="content" placeholder="选项内容">
            </span>
            <span class="key">
                <input type="hidden" name="isKey" value="false">
                <input type="checkbox">答案
            </span>
        </div>
    </div>
    <div class="operation">
        <input type="reset" value="重置">
        <input type="submit" value="添加">
    </div>
    </form>
</div>

<script type="text/javascript" >
    ( function () {

        // 根据参数指定的选择器选择匹配于该选择器的所有元素组成的"集合"(一个类似于数组的容器)
        let checkboxList = document.querySelectorAll( ".topic-container .option-list .option .key input[type=checkbox]" );
        // console.log( checkboxList ); // 在控制台打印"集合"

        // 当 checkbox 状态发生改变时就修改前面的 hidden 的取值
        let action = function( event ){ // 当点击事件发生时，点击事件对应的对象会传入到 该函数
            let checkbox = event.target ; // 通过事件对象来获取事件源对象(也就是被点击的那个复选框)
            // console.dir( checkbox.checked ); // 当复选框被勾选时其checked属性值为true，若为勾选即为false
            let hidden = checkbox.previousElementSibling ; // 获得复选框之前的元素
            hidden.setAttribute( "value" , checkbox.checked );
            // console.log( hidden );
        }

        // 声明一个函数，用来处理 "集合" 中的每个元素
        let fn = function ( element ) { // 参数 element 是由 forEach 函数执行时传入的
            // console.log( element );
            element.addEventListener( "click" , action , false );
        }
        // 通过 forEach 来遍历"集合" : 遍历"集合"中的每个元素，没遇到一个元素就调用一次参数对应的函数
        checkboxList.forEach( fn ); // forEach函数在调用参数对应的函数时会传入依次 当前元素、索引、"集合"

        /* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */
        const submitButton = document.querySelector( ".topic-container .operation input[type=submit]" );
        const topicForm = document.querySelector( ".topic-container form" );
        let submitAction = function( event ){
            event.preventDefault(); // 阻止事件默认行为
            event.stopPropagation(); // 停止事件传播

            // 这里可以完成页面上所输入的内容的检查

            topicForm.submit(); // 通过调用 表单对象 的 submit 函数来提交
        }
        submitButton.addEventListener( "click" , submitAction , false );
    } )();
</script>