Jquery练习题—实现分组添加功能

来源：互联网发布：jq遍历json数组编辑：程序博客网时间：2024/05/12 14:32

实现分组添加功能：

<title>Insert title here</title>

$(function(){

//需求1：点击 submit 按钮时,检查是否选择 type,若没有选择给出提示: "请选择类型";

//需求2：使包括新增的 li 都能响应 onclick 事件: 弹出 li 的文本值.

//检查文本框中是否有输入(可以去除前后空格),若没有输入,则给出提示:"请输入内容";

//若检查都通过, 则在相应的 ul 节点中添加对应的 li 节点

</script>

</head>

<body>

<p>你喜欢哪个城市?</p>

</ul>

<p>你喜欢哪款单机游戏?</p>

</ul>

<input type="radio" name="type" value="city">城市

<input type="radio" name="type" value="game">游戏

name: <input type="text" name="name"/>

</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>

阅读全文

1 0