編碼和面試挑戰的新手。
他們要求使用 JQuery 制作的儀表板（我以前從未使用過）。來自 W3schools 和堆疊中的大量幫助使我 100% 完成了我需要的功能（即使設計可以改進：功能先潤色后！）
好處之一是具有一些 UI/UX 功能，因此我使 div 可拖動，并且我從
但是當它運行時，調整大小的小圖示似乎與上面頁面上的示例有所不同。
有什么想法可以將它修復回呼整大小圖示，它應該看起來的樣子嗎？
var $linkID, $linkURL
function changeTime(){
let d= new Date(); //built in JS function
let mm = ('0' d.getMinutes()).slice(-2);
let ss = ('0' d.getSeconds()).slice(-2);
document.getElementById("dateTime").innerHTML = `${d.getMonth()}/${d.getDay()}/${d.getYear()} ${d.getHours()}:${mm}:${ss}`;
}
setInterval(changeTime, 1000); //updates the time dynamically.
//Group1
//Click to Show functionality: group 1
//clicks hide all divs, then uses a "title" attribute as a variable to toggle the associated box showing that title's information.
//I am no marketer, so the text is some basic info I read on the websites.
$(document).ready(function(){
$(".clickToShow").click(function(){
$(".clickToShowBlock").hide();
let idTag = '#' this.getAttribute("title");
$(idTag).toggle();
});
});
//Group 2
//Same as above, except using hover instead of click to show the images.
$(document).ready(function(){
$(".hoverToShow").hover(function(){let idTag = '#' this.getAttribute("title");
$(idTag).show();
}, function(){let idTag = '#' this.getAttribute("title");
$(idTag).hide();
$(".hoverToShowBlock").hide();
});
});
//Group3
//follows group 1 method, but loads all links at the same time by toggling a button.
$(document).ready(function(){
$("#showLinksButton").click(function(){
$(".showLinks").toggle();
});
});
$(function(){
$("#showLinksButton").click(function () {
$(this).text(function(i, text){
return text === "Show Links" ? "Hide Links" : "Show Links";
})
});
})
//https://stackoverflow.com/questions/13652835/button-text-toggle-in-jquery
//Group4
//https://stackoverflow.com/questions/4511652/looping-through-list-items-with-jquery
// http://jsfiddle.net/mblase75/wE4S8/
//from: https://stackoverflow.com/questions/20105762/show-n-number-of-list-elements-at-a-time-jquery
$(document).ready(function (){
var elements =$("#aviationLinks li");
var index=0;
var showTwo = function (index) {
if (index >=elements.length){
index = 0
}
elements.hide().slice(index, index 2).show();
setTimeout(function(){
showTwo(index 2)
}, 5000);
}
showTwo(0);
});
//Make key-value pairs on id and hyperlinks
const linkIDref = {
delphiInfo:"https://delphitechcorp.com/",
vrCityInfo:"https://vrcity.ca/",
auroraInfo:"https://auroraaerial.aero",
virbelaURL:"https://virbela.com",
amazonURL:"https://amazon.com",
moodleURL:"https://moodle.org",
xPlaneURL:"https://x-plane.com",
wordpressURL:"https://wordpress.org",
gitHub:"https://github.com",
googleMeet:"https://meet.google.com",
slack:"https://slack.com",
wrike:"https://wrike.com",
airbus:"https://airbus.com",
boeing:"https://boeing.com",
lockheedMartin:"https://lockheedmartin.com",
rtx:"https://rtx.com",
geAviation:"https://geaviation.com",
safran:"https://safran-group.com",
leonardo:"https://leonardocompany.com",
baseSystems:"https://baesystems.com"
}
//use key-values to populate the dynamic hyperlink functionality.
jQuery(".link").click(function(){
$linkID = $(this).attr("id");
window.location.href=linkIDref[$linkID];
})
$( function() {
$( ".groups" ).draggable();
} );
$( function() {
$( ".groups" ).resizable();
} );body{
font-family: Arial, Helvetica, sans-serif;
font-size:1em;
background-color: skyblue;
}
h1{
text-align:center;
}
div{
border: black solid 2px;
border-radius:10px;
}
#main{
width:100%;
height: fit-content;
border:none;
}
#dashboard{
margin:auto auto auto auto;
display:grid;
border:none;
grid-template-columns: auto auto;
column-gap: 1em;
row-gap: 1em;
width:100%;
height:fit-content;
}
#dateTime{
margin:1em auto 1em auto;
border: black solid 2px;
width:fit-content;
height:fit-content;
padding:1em;
font-size: larger;
font-weight: bolder;
background-color: snow;
}
.groups{
position: relative;
margin:auto auto auto auto;
width:35em;
min-width: 32.5em;
background-color: snow;
padding:0px;
overflow: hidden;
}
.groups h2{
position:relative;
top:-0.9em;
text-align:center;
background-color: blue;
color:white;
cursor:move;
}
ul{
list-style-type: none;
position:relative;
top:-0.5em;
}
#group1{
height:10em;
}
#group2{
height:10em;
}
.clickToShowBlock{
cursor:pointer;
display:none;
position:absolute;
top: 3.5em;
left:12em;
height:fit-content;
width:20em;
border:none;
}
.hoverToShowBlock{
display:none;
position:absolute;
top: 4em;
left:12em;
height:fit-content;
width:20em;
border:none;
}
.hoverToShowBlock img{
max-height:6em;
max-width:19em;
}
dd{
padding: 0.5em 0em 0.5em 0em;
}
.showLinks{
display:none;
}
#showLinksButton{
position:absolute;
right:0.5em;
top:2em;
font-size:2em;
}
li:hover{
cursor:pointer;
}
dd:hover{
cursor:pointer;
}
@media screen and (max-width: 1200px)
{
#dashboard{
grid-template-columns: auto;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<link rel="stylesheet" href="stylesheet2.css">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Delphi Tech Corp Front-End Development Team Coding Test</title>
<script src="script2.js" defer></script>
</head>
<body>
<h1>TASK 2 Dashboard</h1>
<div id="main">
<div id = "dateTime"></div>
<div id = "dashboard">
<div id="group1" class = "groups">
<h2 id="group1h2">Group 1 - Alan Zheng's Companys Products</h2>
<ul>
<li class="clickToShow" title = "vrCityInfo">VR City</li>
<li class="clickToShow" title = "delphiInfo">Delphi Tech Corp</li>
<li class="clickToShow" title = "auroraInfo">Aurora Aerial</li>
</ul>
<div id="vrCityInfo" class="clickToShowBlock link">
VR City is a virtual aviation training company. Our virtual community provides people with the learning tools to learn how to fly.
<br>
https://vrcity.ca/
</div>
<div id="delphiInfo" class="clickToShowBlock link">
Delphi Technology Corp is integrating new technologies such as augmented reality and virtuality into the aerospace and aviation industries!
<br>
https://delphitechcorp.com/
</div>
<div id="auroraInfo" class="clickToShowBlock link">
Aurora Aerial offers custom drone manufacturing. We develop both drone hardware and software.
<br>
https://auroraaerial.aero
</div>
</div>
<div id="group2" class = "groups">
<h2 id="group2h2">Group 2 - Technology products used at Delphi</h2>
<ul>
<li class="hoverToShow link" title= "virbela" id= "virbelaURL">Virbela</li>
<li class="hoverToShow link" title= "amazon" id= "amazonURL">Amazon</li>
<li class="hoverToShow link" title= "moodle" id= "moodleURL">Moodle</li>
<li class="hoverToShow link" title= "xPlane" id= "xPlaneURL">X-Plane</li>
<li class="hoverToShow link" title= "wordpress" id= "wordpressURL">Wordpress</li>
</ul>
<div id="virbela" class="hoverToShowBlock">
<img alt="Virbela" src="Logos/5fab9393da4ffe1e20d14cc6_virbela-logo-black-website.png">
</div>
<div id="amazon" class="hoverToShowBlock">
<img alt="Amazon" src="Logos/NicePng_amazon-png_197561.png">
</div>
<div id="moodle" class="hoverToShowBlock">
<img alt="Moodle" src="Logos/moodle_logo_small.svg">
</div>
<div id="xPlane" class="hoverToShowBlock">
<img alt="X-Plane" src="Logos/x-plane-logo.svg">
</div>
<div id="wordpress" class="hoverToShowBlock">
<img alt="Virbela" src="Logos/NicePng_wordpress-logo-png_395752.png">
</div>
</div>
<div id="group3" class = "groups">
<h2 id="group3h2">Group 3 - Websites used at Delphi</h2>
<ul>
<dt>GitHub</dt>
<dd class="showLinks link" id="gitHub">https://github.com</dd>
<dt>Google Meet</dt>
<dd class="showLinks link" id="googleMeet">https://meet.google.com</dd>
<dt>Slack</dt>
<dd class="showLinks link" id="slack">https://slack.com</dd>
<dt>Wrike</dt>
<dd class="showLinks link" id="wrike">https://wrike.com</dd>
</ul>
<button id="showLinksButton">Show Links</button>
</div>
<div id="group4" class = "groups">
<h2 id="group4h2">Group 4 - Aerospace Companies</h2>
<ul id="aviationLinks">
<li class = "cycle link" id="airbus">airbus.com</li>
<li class = "cycle link" id="boeing">boeing.com</li>
<li class = "cycle link" id="lockheedMartin">lockheedmartin.com</li>
<li class = "cycle link" id="rtx">rtx.com</li>
<li class = "cycle link" id="geAviation">geaviation.com</li>
<li class = "cycle link" id="safran">safran-group.com</li>
<li class = "cycle link" id="leonardo">leonardocompany.com</li>
<li class = "cycle link" id="baseSystems">baesystems.com</li>
</ul>
</div>
</div>
</div>
</body>
</html>
uj5u.com熱心網友回復：
您根本沒有使用 jQuery-ui CSS 檔案...
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
而且你對div. 的規則太“寬”了。因此特定于 rezise 句柄，它需要使用:not()選擇器的例外。
div:not(.ui-resizable-handle){
var $linkID, $linkURL
function changeTime(){
let d= new Date(); //built in JS function
let mm = ('0' d.getMinutes()).slice(-2);
let ss = ('0' d.getSeconds()).slice(-2);
document.getElementById("dateTime").innerHTML = `${d.getMonth()}/${d.getDay()}/${d.getYear()} ${d.getHours()}:${mm}:${ss}`;
}
setInterval(changeTime, 1000); //updates the time dynamically.
//Group1
//Click to Show functionality: group 1
//clicks hide all divs, then uses a "title" attribute as a variable to toggle the associated box showing that title's information.
//I am no marketer, so the text is some basic info I read on the websites.
$(document).ready(function(){
$(".clickToShow").click(function(){
$(".clickToShowBlock").hide();
let idTag = '#' this.getAttribute("title");
$(idTag).toggle();
});
});
//Group 2
//Same as above, except using hover instead of click to show the images.
$(document).ready(function(){
$(".hoverToShow").hover(function(){let idTag = '#' this.getAttribute("title");
$(idTag).show();
}, function(){let idTag = '#' this.getAttribute("title");
$(idTag).hide();
$(".hoverToShowBlock").hide();
});
});
//Group3
//follows group 1 method, but loads all links at the same time by toggling a button.
$(document).ready(function(){
$("#showLinksButton").click(function(){
$(".showLinks").toggle();
});
});
$(function(){
$("#showLinksButton").click(function () {
$(this).text(function(i, text){
return text === "Show Links" ? "Hide Links" : "Show Links";
})
});
})
//https://stackoverflow.com/questions/13652835/button-text-toggle-in-jquery
//Group4
//https://stackoverflow.com/questions/4511652/looping-through-list-items-with-jquery
// http://jsfiddle.net/mblase75/wE4S8/
//from: https://stackoverflow.com/questions/20105762/show-n-number-of-list-elements-at-a-time-jquery
$(document).ready(function (){
var elements =$("#aviationLinks li");
var index=0;
var showTwo = function (index) {
if (index >=elements.length){
index = 0
}
elements.hide().slice(index, index 2).show();
setTimeout(function(){
showTwo(index 2)
}, 5000);
}
showTwo(0);
});
//Make key-value pairs on id and hyperlinks
const linkIDref = {
delphiInfo:"https://delphitechcorp.com/",
vrCityInfo:"https://vrcity.ca/",
auroraInfo:"https://auroraaerial.aero",
virbelaURL:"https://virbela.com",
amazonURL:"https://amazon.com",
moodleURL:"https://moodle.org",
xPlaneURL:"https://x-plane.com",
wordpressURL:"https://wordpress.org",
gitHub:"https://github.com",
googleMeet:"https://meet.google.com",
slack:"https://slack.com",
wrike:"https://wrike.com",
airbus:"https://airbus.com",
boeing:"https://boeing.com",
lockheedMartin:"https://lockheedmartin.com",
rtx:"https://rtx.com",
geAviation:"https://geaviation.com",
safran:"https://safran-group.com",
leonardo:"https://leonardocompany.com",
baseSystems:"https://baesystems.com"
}
//use key-values to populate the dynamic hyperlink functionality.
jQuery(".link").click(function(){
$linkID = $(this).attr("id");
window.location.href=linkIDref[$linkID];
})
$( function() {
$( ".groups" ).draggable();
} );
$( function() {
$( ".groups" ).resizable();
} );body{
font-family: Arial, Helvetica, sans-serif;
font-size:1em;
background-color: skyblue;
}
h1{
text-align:center;
}
div:not(.ui-resizable-handle){ /* Added an exception to your generic rule */
border: black solid 2px;
border-radius:10px;
}
#main{
width:100%;
height: fit-content;
border:none;
}
#dashboard{
margin:auto auto auto auto;
display:grid;
border:none;
grid-template-columns: auto auto;
column-gap: 1em;
row-gap: 1em;
width:100%;
height:fit-content;
}
#dateTime{
margin:1em auto 1em auto;
border: black solid 2px;
width:fit-content;
height:fit-content;
padding:1em;
font-size: larger;
font-weight: bolder;
background-color: snow;
}
.groups{
position: relative;
margin:auto auto auto auto;
width:35em;
min-width: 32.5em;
background-color: snow;
padding:0px;
overflow: hidden;
}
.groups h2{
position:relative;
top:-0.9em;
text-align:center;
background-color: blue;
color:white;
cursor:move;
}
ul{
list-style-type: none;
position:relative;
top:-0.5em;
}
#group1{
height:10em;
}
#group2{
height:10em;
}
.clickToShowBlock{
cursor:pointer;
display:none;
position:absolute;
top: 3.5em;
left:12em;
height:fit-content;
width:20em;
border:none;
}
.hoverToShowBlock{
display:none;
position:absolute;
top: 4em;
left:12em;
height:fit-content;
width:20em;
border:none;
}
.hoverToShowBlock img{
max-height:6em;
max-width:19em;
}
dd{
padding: 0.5em 0em 0.5em 0em;
}
.showLinks{
display:none;
}
#showLinksButton{
position:absolute;
right:0.5em;
top:2em;
font-size:2em;
}
li:hover{
cursor:pointer;
}
dd:hover{
cursor:pointer;
}
@media screen and (max-width: 1200px)
{
#dashboard{
grid-template-columns: auto;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css"><!-- Added the jQuery-ui CSS file -->
<link rel="stylesheet" href="stylesheet2.css">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Delphi Tech Corp Front-End Development Team Coding Test</title>
<script src="script2.js" defer></script>
</head>
<body>
<h1>TASK 2 Dashboard</h1>
<div id="main">
<div id = "dateTime"></div>
<div id = "dashboard">
<div id="group1" class = "groups">
<h2 id="group1h2">Group 1 - Alan Zheng's Companys Products</h2>
<ul>
<li class="clickToShow" title = "vrCityInfo">VR City</li>
<li class="clickToShow" title = "delphiInfo">Delphi Tech Corp</li>
<li class="clickToShow" title = "auroraInfo">Aurora Aerial</li>
</ul>
<div id="vrCityInfo" class="clickToShowBlock link">
VR City is a virtual aviation training company. Our virtual community provides people with the learning tools to learn how to fly.
<br>
https://vrcity.ca/
</div>
<div id="delphiInfo" class="clickToShowBlock link">
Delphi Technology Corp is integrating new technologies such as augmented reality and virtuality into the aerospace and aviation industries!
<br>
https://delphitechcorp.com/
</div>
<div id="auroraInfo" class="clickToShowBlock link">
Aurora Aerial offers custom drone manufacturing. We develop both drone hardware and software.
<br>
https://auroraaerial.aero
</div>
</div>
<div id="group2" class = "groups">
<h2 id="group2h2">Group 2 - Technology products used at Delphi</h2>
<ul>
<li class="hoverToShow link" title= "virbela" id= "virbelaURL">Virbela</li>
<li class="hoverToShow link" title= "amazon" id= "amazonURL">Amazon</li>
<li class="hoverToShow link" title= "moodle" id= "moodleURL">Moodle</li>
<li class="hoverToShow link" title= "xPlane" id= "xPlaneURL">X-Plane</li>
<li class="hoverToShow link" title= "wordpress" id= "wordpressURL">Wordpress</li>
</ul>
<div id="virbela" class="hoverToShowBlock">
<img alt="Virbela" src="Logos/5fab9393da4ffe1e20d14cc6_virbela-logo-black-website.png">
</div>
<div id="amazon" class="hoverToShowBlock">
<img alt="Amazon" src="Logos/NicePng_amazon-png_197561.png">
</div>
<div id="moodle" class="hoverToShowBlock">
<img alt="Moodle" src="Logos/moodle_logo_small.svg">
</div>
<div id="xPlane" class="hoverToShowBlock">
<img alt="X-Plane" src="Logos/x-plane-logo.svg">
</div>
<div id="wordpress" class="hoverToShowBlock">
<img alt="Virbela" src="Logos/NicePng_wordpress-logo-png_395752.png">
</div>
</div>
<div id="group3" class = "groups">
<h2 id="group3h2">Group 3 - Websites used at Delphi</h2>
<ul>
<dt>GitHub</dt>
<dd class="showLinks link" id="gitHub">https://github.com</dd>
<dt>Google Meet</dt>
<dd class="showLinks link" id="googleMeet">https://meet.google.com</dd>
<dt>Slack</dt>
<dd class="showLinks link" id="slack">https://slack.com</dd>
<dt>Wrike</dt>
<dd class="showLinks link" id="wrike">https://wrike.com</dd>
</ul>
<button id="showLinksButton">Show Links</button>
</div>
<div id="group4" class = "groups">
<h2 id="group4h2">Group 4 - Aerospace Companies</h2>
<ul id="aviationLinks">
<li class = "cycle link" id="airbus">airbus.com</li>
<li class = "cycle link" id="boeing">boeing.com</li>
<li class = "cycle link" id="lockheedMartin">lockheedmartin.com</li>
<li class = "cycle link" id="rtx">rtx.com</li>
<li class = "cycle link" id="geAviation">geaviation.com</li>
<li class = "cycle link" id="safran">safran-group.com</li>
<li class = "cycle link" id="leonardo">leonardocompany.com</li>
<li class = "cycle link" id="baseSystems">baesystems.com</li>
</ul>
</div>
</div>
</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/385325.html
標籤：javascript html 查询 css
上一篇：我正在嘗試使用帶有html和js的不同按鈕在同一變數上傳遞不同的鏈接
下一篇：CSS無效屬性值-背景-影像