gpt4 book ai didi

javascript - 网站未扩展以显示 jQuery 隐藏的信息

转载 作者:行者123 更新时间:2023-11-28 07:33:17 25 4
gpt4 key购买 nike

我正在学习 Javascript/jQuery 并尝试做到这一点,以便在单击提交按钮后,网站会展开并显示与搜索相关的信息(我还没有制作那部分,但是我正在使用测试 div 以显示它的去向,但它没有完整显示。但是,该网站没有扩展,也没有显示滚动功能。

这是 HTML:

<!DOCTYPE html>
<html lang="end">
<head>
<meta charset="utf-8" />
<title>League of Legends Summoner Stats</title>
<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" href="main.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div class="center">
<select class="region_selector">
<option value="NA">North America</option>
<option value="EUW">EU West</option>
<option value="EUNE">EU East</option>
<option value="KR">Korea</option>
</select>
</div>
<div id="title">
<h1>LoL Stat Find</h1>
</div>
<div id="subtitle">
<h3>Quickly Find Summoner Stats!</h3>
</div>
<button type="submit" id="search_button">Search</button>
<input name="summoner_name" type="text" maxlength="512" id="summoner_name" placeholder="Summoner Name" class="summoner" />
<script src="script.js"></script>
<div id="stats">
<section id="main">
<h1>THIS IS A TEST</h1>
some more testing
<br>this is another test
<br>another
</section>
</div>
</body>
</html>

这是 CSS:

body {
background-image: url("background.jpg");
width: 100%;
background-size: 100%;
}
.region_selector {
position: fixed;
top: 50%;
left: 50%;
width: 150px;
/* bring your own prefixes */
transform: translate(-100%, -50%);
display: inline;
}
#summoner_name {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(5%, -50%);
display: inline;
}
.summoner {
font-size: 14px;
border-width: 2px;
border-radius: 5px;
}
#search_button {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, 100%);
display: inline-block;
margin: 0 10px 0 0;
padding: 5px 15px;
font-size: 15px;
color: white;
background-color: #1947D1;
font-family: Tahoma;
line-height: 1.8;
appearance: none;
box-shadow: none;
border-radius: 5px;
border-color: #1947D1;
}
#title {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -110%);
display:inline;
color: white;
font-size: 48px;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
#subtitle {
position: fixed;
top: 50%;
left: 50%;
font-size: 20px;
/* bring your own prefixes */
transform: translate(-50%, -130%);
font-family: tahoma;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
display: inline;
color: #009933;
font-style: bold;
}
#stats {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, 200%);
}

这是 Javascript:

$(function () {
$("#stats").hide();
});
document.getElementById('search_button').onclick = function () {
var search = document.getElementById('summoner_name').value;
$(function () {
$("#stats").show();
});
}

我是 HTML/CSS/JS 的新手,所以我的代码可能乱七八糟。

最佳答案

自从使用 jQuery 以来,就用它来注册点击处理程序....还有一个问题是应用于 #stats

的样式

$(function() {
$("#stats").hide();

$('#search_button').click(function() {
$("#stats").show();
});
});
body {
background-image: url("background.jpg");
width: 100%;
background-size: 100%;
}
.region_selector {
position: fixed;
top: 50%;
left: 50%;
width: 150px;
/* bring your own prefixes */
transform: translate(-100%, -50%);
display: inline;
}
#summoner_name {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(5%, -50%);
display: inline;
}
.summoner {
font-size: 14px;
border-width: 2px;
border-radius: 5px;
}
#search_button {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, 100%);
display: inline-block;
margin: 0 10px 0 0;
padding: 5px 15px;
font-size: 15px;
color: white;
background-color: #1947D1;
font-family: Tahoma;
line-height: 1.8;
appearance: none;
box-shadow: none;
border-radius: 5px;
border-color: #1947D1;
}
#title {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -110%);
display: inline;
color: white;
font-size: 48px;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
#subtitle {
position: fixed;
top: 50%;
left: 50%;
font-size: 20px;
/* bring your own prefixes */
transform: translate(-50%, -130%);
font-family: tahoma;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
display: inline;
color: #009933;
font-style: bold;
}
#stats {
position: fixed;
top: 1px;
<!--here is the problem --> left: 50%;
/* bring your own prefixes */
transform: translate(-50%, 200%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="center">
<select class="region_selector">
<option value="NA">North America</option>
<option value="EUW">EU West</option>
<option value="EUNE">EU East</option>
<option value="KR">Korea</option>
</select>
</div>
<div id="title">
<h1>LoL Stat Find</h1>
</div>
<div id="subtitle">
<h3>Quickly Find Summoner Stats!</h3>
</div>
<button type="submit" id="search_button">Search</button>
<input name="summoner_name" type="text" maxlength="512" id="summoner_name" placeholder="Summoner Name" class="summoner" />
<div id="stats">
<section id="main">
<h1>THIS IS A TEST</h1>
some more testing
<br/>this is another test
<br/>another
</section>
</div>

关于javascript - 网站未扩展以显示 jQuery 隐藏的信息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31375016/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com