<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>
<button>梦想</button>
<button>爱好</button>
<button>性格</button>
<button>评价</button>
<script>
$("<div></div>").css({
width:"400px",
height:"300px",
textAlign:"center",
lineHeight:"300px"
}).appendTo(document.body);
$("button").on("click",function (e) {
var arr=Array.from($("button"));
var index=arr.indexOf(this);
if(index===0){
$("div").css({
backgroundColor:"#00ff00"
}).text("找到工作，挣很多钱！");
}else if(index===1){
$("div").css({
backgroundColor:"#ff0000"
}).text("唱歌唱歌，旅游旅游！");
}else if(index===2){
$("div").css({
backgroundColor:"#0000ff"
}).text("心直口快，得罪别人！");
}else if(index===3){
$("div").css({
backgroundColor:"#0ffff0"
}).text("此人垃圾，请勿靠近！");
}
});
</script>
</body>
</html>
结果截图：
