jq 页面添加布局
要求:
1)实现如上图页面布局(10分)
2)实现选择城市所添加的内容追加到你喜欢哪个城市下(10分)
3)实现选择游戏所添加的内容追加到你喜欢哪款游戏下(10分)
4)新增的数据字体颜色设置为粉色(10分)
HTML代码:
<p>你喜欢那个城市?</p> <ul> <li>北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> <li id="citys"></li> </ul> <p>你喜欢那个单机游戏?</p> <ul> <li>红警</li> <li>实况</li> <li>极品飞车</li> <li>魔兽</li> <li id="you"></li> </ul> <input type="radio" class="select" name="select" value="1">城市 <input type="radio" class="select" name="select" value="2">游戏 name: <input type="text" class="word"><input type="submit" class="city" value="submit">
JavaScript代码
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> <!--给class为city 设置点击事件--> $('.city').click(function () { //获取 classs 为elect选中的的值 var select = $(".select:checked").val(); if (select == 1) { // 获取值 var name = $('.word').val(); //追加元素 $("#citys").append("<li>" + name + "</li>"); $("#citys").css('color', 'red') } if (select == 2) { var name = $('.word').val(); $("#you").append("<li>" + name + "</li>"); $("#you").css('color', 'red') } }) <script>