我这怎么加个开关按钮，使得出发click事件后再次点击使信息消失呢？
来源：2-8 自由编程
xxxxxxb
2020-01-09 00:40:03
我想用三木运算符写的，但是好像不太对
package com.imooc.ajax;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSON;
/**
* Servlet implementation class EmployeeList
*/
@WebServlet("/employee_list")
public class EmployeeList extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public EmployeeList() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
List<String> list = new ArrayList<String>();
list.add("小红<br>小明<br>小白");
list.add("职员<br>经理");
list.add("人事部<br>技术部<br>无线事业部");
String lists = JSON.toJSONString(list);
System.out.println(lists);
response.getWriter().println(lists);
}
}
===========================================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
*{
margin:0px;
padding:0px;
}
.e {
width:600px;
}
div{
width:600px;
height:600px;
float:left;
/* position:relative; */
}
.div1{
/* background-color:blue; */
}
.div2{
/* background-color:red; */
margin-left:5px;
}
.div3{
/* background-color:yellow; */
margin-left:5px;
}
</style>
</head>
<body>
<input type="button" value="员工列表" class="e a" >
<input type="button" value="职位列表" class="e b" >
<input type="button" value="部门列表" class="e c" >
<div id="employee" class="div1">
</div>
<div id="position" class="div2">
</div>
<div id="department" class="div3">
</div>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
//1.创建XmlHttpRequest对象
var xmlhttp;
if(window.XMLHttpRequest){
//对于新版本浏览器都是支持这项的
xmlhttp = new XMLHttpRequest();
}else{
//ie5，6浏览器
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2.发送Ajax请求到服务器
xmlhttp.open("GET","/ajax/employee_list",true);
xmlhttp.send();
//3.处理服务器响应
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
var t =xmlhttp.responseText;
console.log(t);
var json = JSON.parse(t);
/* console.log(json[0]);
console.log(json[1]);
console.log(json[2]); */
$(".a").click(function(){
$(".div1").html("") ? $(".div1").html(json[0]) : $(".div1").html("")
})
$(".b").click(function(){
$(".div2").html(json[1]);
})
$(".c").click(function(){
$(".div3").html(json[2]);
})
}
}
</script>
</body>
</html>
2回答
-
同学你好，1、建议同学在单击事件中添加ajax请求的内容，而不是在ajax请求中添加事件，这样会导致ajax请求的部分问题。比如
$(".c").click(function(){ ajax请求内容 })2、在第一次点击后没法输出信息，是因为一个div中默认是有空格内容的，此时使用$(".div3").html() 获取到的内容是由几个空格组成，对应判断条件就是$(".div3").html()不为空，执行清空$(".div3")内容的代码。
解决这个问题，可以在开始执行请求前，先清空div标签中的空格内容。比如 $(".div1").html("");
3、在使用三目运算符时，建议$(".div3").html() =="" 这样的布尔表达的判断，而不是只获取某个标签。
修改后代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> *{ margin:0px; padding:0px; } .e { width:600px; } div{ width:600px; height:600px; float:left; /* position:relative; */ } .div1{ /* background-color:blue; */ } .div2{ /* background-color:red; */ margin-left:5px; } .div3{ /* background-color:yellow; */ margin-left:5px; } </style> </head> <body> <input type="button" value="员工列表" class="e a" > <input type="button" value="职位列表" class="e b" > <input type="button" value="部门列表" class="e c" > <div id="employee" class="div1"> </div> <div id="position" class="div2"> </div> <div id="department" class="div3"> </div> <script type="text/javascript" src="js/jquery-3.4.1.js"></script> <script type="text/javascript"> $(".div1").html(""); //清空div中的空格等内容 $(".div2").html(""); $(".div3").html(""); $(".c").click(function(){ //1.创建XmlHttpRequest对象 var xmlhttp; if(window.XMLHttpRequest){ //对于新版本浏览器都是支持这项的 xmlhttp = new XMLHttpRequest(); }else{ //ie5，6浏览器 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } // 2.发送Ajax请求到服务器 xmlhttp.open("GET","/ajax/employee_list",true); xmlhttp.send(); //3.处理服务器响应 xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ var t =xmlhttp.responseText; console.log(t); var json = JSON.parse(t); //使用 =="" 完成比较的布尔判断 $(".div3").html() ==""? $(".div3").html(json[2]) : $(".div3").html("") } } }) $(".b").click(function(){ //参考上面的内容修改 }) $(".a").click(function(){ //参考上面的内容修改 }) </script> </body> </html>如果我的回答解决了你的疑惑，请采纳！祝学习愉快！
0h020-01-09 -
好帮手慕小班
2020-01-09
同学你好，1、实现再次添加触发事件使得点击的信息消失，但是这样的实现是比较麻烦的，并且不符合题目要求的，不建议同学这样实现。
这样实现，同学可以在id为employee、position、department按钮中添加单击事件，事件内容是直接获取到对应的标签元素，并清空元素内容，比如：$("#employee").html("");
2、同学也可以参考这个问答中的代码，https://class.imooc.com/course/qadetail/154109 实现将发送请求得到的内容 写入一个div中，当点击另一个按钮时直接添加新的内容。
如果我的回答解决了你的疑惑，请采纳！祝学习愉快！
0h020-01-09
相似问题