Jquery练习题—实现分组添加功能
實現分組添加功能：
<title>Insert title here</title>
??? <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
??? <script type="text/javascript">
??????? $(function(){
? ? //需求1：點擊?submit?按鈕時,檢查是否選擇?type,若沒有選擇給出提示: "請選擇類型";
? ? //需求2：使包括新增的?li?都能響應?onclick?事件:?彈出?li?的文本值. ?
? ? //檢查文本框中是否有輸入(可以去除前后空格),若沒有輸入,則給出提示:"請輸入內容";
? ? //若檢查都通過,?則在相應的?ul?節點中添加對應的?li?節點
</script>
</head>
<body>
?
??? <p>你喜歡哪個城市?</p>
???
??????? <ul id="city">
??????????? <li id="bj">北京</li>
??????????? <li>上海</li>
??????????? <li>東京</li>
??????????? <li>首爾</li>
??????? </ul>
???????
??????? <br><br>
??????? <p>你喜歡哪款單機游戲?</p>
??????? <ul id="game">
??????????? <li id="rl">紅警</li>
??????????? <li>實況</li>
??????????? <li>極品飛車</li>
??????????? <li>魔獸</li>
??????? </ul>???????
??????? <br><br>???????
??????? <form action="dom-7.html" name="myform">
???????????
??????????? <input type="radio" name="type" value="city">城市
??????????? <input type="radio" name="type" value="game">游戲
???????
??????????? name: <input type="text" name="name"/>
???????
??????????? <input type="submit" value="Submit" id="submit"/>
???????????
??????? </form>
</body>
答案賞析如下：
<scripttype="text/javascript">
??????? $(function(){
??????????? //需求2：使包括新增的 li 都能響應 onclick 事件:彈出 li 的文本值.??
??????????? function showContent(li){
??????????????? alert($(li).text());
??????????? }
??????????? $("li").click(function(){
??????????????? showContent(this)
??????????? });
???????????
??????????? //需求1：點擊 submit 按鈕時,檢查是否選擇type,若沒有選擇給出提示: "請選擇類型";
??????????? $(":submit").click(function(){
??????????????? var $type = $(":radio[name='type']:checked");
??????????????? if($type.length == 0 ){
??????????????????? alert("請選擇類型");
??????????????????? return false;
??????????????? }
??????????????? var typeVal =$type.val();
??????????????? //檢查文本框中是否有輸入(可以去除前后空格),若沒有輸入,則給出提示:"請輸入內容";
??????????????? var $text = $(":text[name='name']");
??????????????? var textVal =$.trim($text.val());
??????????????? $text.val(textVal);
??????????????? if(textVal == ""){
??????????????????? alert("請輸入內容");
??????????????????? return false;
??????????????? }
??????????????? //alert("^^"+ textVal+ "__");
??????????????? //若檢查都通過, 則在相應的 ul 節點中添加對應的li 節點
??????????????? $("<li>" + textVal +"</li>").appendTo($("#" + typeVal))
????????????????????????????????????????????.click(function(){
????????????????????????????????????????????????showContent(this)
????????????????????????????????????????????});
??????????????? $text.val("");
??????????????? return false;
??????????? });
??????? })
??? </script>
總結
以上是生活随笔為你收集整理的Jquery练习题—实现分组添加功能的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 自动化运维Shell课堂笔记
- 下一篇： 机器学习基础—Kaggle泰坦尼克预测(