Difference between revisions of "Template:BNU-China/Javascript/team"

Line 16: Line 16:
 
var teamElem = this;
 
var teamElem = this;
 
teamElem.style.cursor = "pointer";
 
teamElem.style.cursor = "pointer";
−
var temp = teamElem.getElementsByClassName(".member-img")[1];
+
var temp = teamElem.getElementsByClassName("member-img")[1];
 
temp.style.zIndex = 2;
 
temp.style.zIndex = 2;
 
temp.style.opacity = 0.4;
 
temp.style.opacity = 0.4;
Line 27: Line 27:
 
var teamElem = this;
 
var teamElem = this;
 
teamElem.style.cursor = "auto";
 
teamElem.style.cursor = "auto";
−
var temp = teamElem.getElementsByClassName(".member-img")[1];
+
var temp = teamElem.getElementsByClassName("member-img")[1];
 
temp.style.zIndex = -2;
 
temp.style.zIndex = -2;
 
temp = teamElem.querySelector(".member-intro");
 
temp = teamElem.querySelector(".member-intro");
Line 37: Line 37:
 
var teamElem = this;
 
var teamElem = this;
 
teamElem.style.cursor = "auto";
 
teamElem.style.cursor = "auto";
−
var temp = teamElem.getElementsByClassName(".member-img")[2];
+
var temp = teamElem.getElementsByClassName("member-img")[2];
 
temp.style.zIndex = 3;
 
temp.style.zIndex = 3;
 
temp = teamElem.querySelector(".member-name");
 
temp = teamElem.querySelector(".member-name");
Line 49: Line 49:
 
var teamElem = this;
 
var teamElem = this;
 
teamElem.style.cursor = "pointer";
 
teamElem.style.cursor = "pointer";
−
var temp = teamElem.getElementsByClassName(".member-img")[2];
+
var temp = teamElem.getElementsByClassName("member-img")[2];
 
temp.style.zIndex = -3;
 
temp.style.zIndex = -3;
 
temp.style.opacity = 0.4;
 
temp.style.opacity = 0.4;

Revision as of 11:45, 7 October 2017

window.onload = function() { var teamElemList = document.getElementsByClassName("team-member"); for(var i = 0;i < teamElemList.length;i ++) { teamElemList[i].addEventListener("mouseover", changeImageOver); teamElemList[i].addEventListener("mouseout", revertImageOut); teamElemList[i].addEventListener("mousedown", changeImageDown); teamElemList[i].addEventListener("mouseup", revertImageUp); } var group = document.querySelector(".group-list"); var groupList = group.children; for(var i =0;i < groupList.length;i ++) { groupList[i].addEventListener("click", displaySelectedGroup); } } function changeImageOver() { var teamElem = this; teamElem.style.cursor = "pointer"; var temp = teamElem.getElementsByClassName("member-img")[1]; temp.style.zIndex = 2; temp.style.opacity = 0.4; temp = teamElem.querySelector(".member-intro"); temp.style.display = "block"; temp.style.opacity = 1; temp.style.transition = "opacity 0.8s"; } function revertImageOut() { var teamElem = this; teamElem.style.cursor = "auto"; var temp = teamElem.getElementsByClassName("member-img")[1]; temp.style.zIndex = -2; temp = teamElem.querySelector(".member-intro"); temp.style.display = "none"; // temp.style.opacity = 0; // temp.style.transition = "opacity 0s"; } function changeImageDown() { var teamElem = this; teamElem.style.cursor = "auto"; var temp = teamElem.getElementsByClassName("member-img")[2]; temp.style.zIndex = 3; temp = teamElem.querySelector(".member-name"); temp.style.display = "none"; temp = teamElem.querySelector(".member-intro"); temp.style.display = "none"; temp = teamElem.querySelector(".member-cute"); temp.style.display = "block"; } function revertImageUp() { var teamElem = this; teamElem.style.cursor = "pointer"; var temp = teamElem.getElementsByClassName("member-img")[2]; temp.style.zIndex = -3; temp.style.opacity = 0.4; temp = teamElem.querySelector(".member-name"); temp.style.display = "block"; temp = teamElem.querySelector(".member-intro"); temp.style.display = "block"; temp = teamElem.querySelector(".member-cute"); temp.style.display = "none"; } function displaySelectedGroup() { var displayGroupName = this.getAttribute("data-group"); var team = document.querySelector(".team-row"); var teamList = team.children; if(displayGroupName == "all") { for(var i = 0;i < teamList.length;i ++) { teamList[i].style.display = "inline-block"; } } else { for(var i = 0;i < teamList.length;i ++) { teamList[i].style.display = "none"; } var displayGroups = team.getElementsByClassName(displayGroupName); for(var i = 0;i < displayGroups.length;i ++) { displayGroups[i].style.display = "inline-block"; } } }