javascript - JavaScript 无法正常工作：删除、调整大小和图像链接
问题描述
我正在尝试创建一个移动网络，但遇到了 JavaScript 函数的问题。
当用户单击其中一个图像并单击“确认”时，它会路由到显示所选图像的下一页。但是，带有另一个“确认”按钮的图像非常大。我不太确定如何删除“确认”按钮并调整第二页中的图像大小。
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<title>Good Cop, Bad Cop</title>
<link rel="stylesheet" href="./styles/Kurt/landing.css"/>
<link rel="stylesheet" href="./styles/Jason/coach_selection.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="">
<img src="./images/Hamburger_icon.svg" alt="Hamburger Menu"/>
</a>
<a href = "styles/Jason/settings.html">
<ul class="navbar-nav">
<img src="./images/bootstrap-icons-1.3.0/person-circle.svg" alt="Profile"
height="50vh"/>
</ul>
</a>
</div>
</nav>
<div class = "image">
<img src="images/dog.png" id="dog" alt="dog">
<img src="images/mother.png" id="mother" alt="mother">
<img src="images/military.png" id="soldier" alt="soldier">
<img src="images/teacher.png" id="teacher" alt="teacher">
</div>
<div class="button" id="button-confirm">
<span>Confirm</span>
</div>
<div class="view-image" style="display:none;">
<img src=""/>
<div class="button" id="button-other"><span>Other</span></div>
</div>
<div class="fixed-bottom">
<div class="navbar navbar-dark bg-primary">
<div class="container-fluid">
<div id="grid">
<div class="bot-nav-img">
<img src="./images/bootstrap-icons-1.3.0/book-fill.svg" alt="Journal"
height="50vh"/>
</div>
<div class="bot-nav-img">
<img src="./images/bootstrap-icons-1.3.0/house-door-fill.svg" alt="Home"
height="50vh"/>
</div>
<div class="bot-nav-img">
<a href = "goals.html">
<img src="./images/bootstrap-icons-1.3.0/table.svg" alt="Goals"
height="50vh"/>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="./styles/Jason/coach_selection.js"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
-->
</body>
</html>
CSS
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<title>Good Cop, Bad Cop</title>
<link rel="stylesheet" href="./styles/Kurt/landing.css"/>
<link rel="stylesheet" href="./styles/Jason/coach_selection.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="">
<img src="./images/Hamburger_icon.svg" alt="Hamburger Menu"/>
</a>
<a href = "styles/Jason/settings.html">
<ul class="navbar-nav">
<img src="./images/bootstrap-icons-1.3.0/person-circle.svg" alt="Profile"
height="50vh"/>
</ul>
</a>
</div>
</nav>
<div class = "image">
<img src="images/dog.png" id="dog" alt="dog">
<img src="images/mother.png" id="mother" alt="mother">
<img src="images/military.png" id="soldier" alt="soldier">
<img src="images/teacher.png" id="teacher" alt="teacher">
</div>
<div class="button" id="button-confirm">
<span>Confirm</span>
</div>
<div class="view-image" style="display:none;">
<img src=""/>
<div class="button" id="button-other"><span>Other</span></div>
</div>
<div class="fixed-bottom">
<div class="navbar navbar-dark bg-primary">
<div class="container-fluid">
<div id="grid">
<div class="bot-nav-img">
<img src="./images/bootstrap-icons-1.3.0/book-fill.svg" alt="Journal"
height="50vh"/>
</div>
<div class="bot-nav-img">
<img src="./images/bootstrap-icons-1.3.0/house-door-fill.svg" alt="Home"
height="50vh"/>
</div>
<div class="bot-nav-img">
<a href = "goals.html">
<img src="./images/bootstrap-icons-1.3.0/table.svg" alt="Goals"
height="50vh"/>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="./styles/Jason/coach_selection.js"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
-->
</body>
</html>
JavaScript
var elementSelected = null;
var typeSelected = false;
$(document).on('click', '.image > img', function(){
$('.image > img').each(function(){
$(this).removeClass('active');
})
$(this).addClass('active');
elementSelected = $(this);
typeSelected = false;
});
$(document).on('input', '#text-src', function(){
$('.image > img').each(function(){
$(this).removeClass('active');
})
elementSelected = $(this);
typeSelected = true;
})
$(document).on('click', '#button-confirm', function(){
$('.image').hide();
if(typeSelected == true){
$('.view-image > img').attr('src', elementSelected.val());
}
else{
$('.view-image > img').attr('src', elementSelected.attr('src'));
}
$('.view-image').fadeIn('high');
})
$(document).on('click', '#button-other', function(){
$('.view-image').hide();
$('.image').fadeIn('high');
})
另外，我试图让字符图像显示在不同的 HTML 文件（用户设置页面）中，但是在搜索了所有视频和资源之后，我仍然无法弄清楚如何..
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="settings.css" />
<link rel="stylesheet" href="../Kurt/landing.css" />
<title>Good-Cop Bad-Cop</title>
</head>
<body>
<header class = "header">
<nav class="navbar navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="../../images/Hamburger_icon.svg" alt="Hamburger Menu"/>
</a>
<a href = "settings.html">
<ul class="navbar-nav">
<img src="../../images/bootstrap-icons-1.3.0/person-circle.svg" alt="Profile"
height="50vh"/>
</ul>
</a>
</div>
</nav>
<div class="fixed-bottom">
<div class="navbar navbar-dark bg-primary">
<div class="container-fluid">
<div id="grid">
<div class="bot-nav-img">
<img src="../../images/bootstrap-icons-1.3.0/book-fill.svg" alt="Journal"
height="50vh"/>
</div>
<div class="bot-nav-img">
<img src="../../images/bootstrap-icons-1.3.0/house-door-fill.svg" alt="Home"
height="50vh"/>
</div>
<div class="bot-nav-img">
<img src="../../images/bootstrap-icons-1.3.0/table.svg" alt="Goals"
height="50vh"/>
</div>
</div>
</div>
</div>
</header>
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-lg-10 col-xl-8 mx-auto">
<div class="my-4">
<form>
<div class="row mt-5 align-items-center">
<div class="col-md-3 text-center mb-5">
<div class="avatar avatar-xl" id="image">
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="..." class="avatar-img rounded-circle" />
</div>
</div>
</div>
<hr class="my-4" />
<div class="form-row">
<p class = "user-information">Information</p>
<div class="form-group col-md-6">
<label for="firstname">First Name</label>
<input type="text" id="firstname" class="form-control" placeholder="Johnny" />
</div>
<div class="form-group col-md-6">
<label for="lastname">Last Name</label>
<input type="text" id="lastname" class="form-control" placeholder="Doe" />
</div>
</div>
<div class="form-group">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="JohnnyDoe@organization.ca" />
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCompany5">Occupation</label>
<select id="inputState5" class="form-control">
<option selected="">Choose...</option>
<option>Student</option>
<option>Employed</option>
<option>Unemployed</option>
<option>Retired</option>
</select>
</div>
<div class="form-group">
<label for="inputAddress5">Address</label>
<input type="text" class="form-control" id="inputAddress5" placeholder="123 St. & Walnut Avenue" />
</div>
<div class="form-group">
<label for="inputAddress5">City</label>
<input type="text" class="form-control" id="inputAddress5" placeholder="Vancouver" />
</div>
<div class="form-group col-md-4">
<label for="inputState5">Province</label>
<select id="inputState5" class="form-control">
<option selected="">Choose...</option>
<option>Alberta</option>
<option>British Columbia</option>
<option>Saskatchewan</option>
<option>Manitoba</option>
<option>Ontario</option>
<option>Quebec</option>
<option>New Brunswick</option>
<option>Nova Scotia</option>
<option>Prince Edward Island</option>
<option>Newfoundland and Labrador</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip5">Postal Code</label>
<input type="text" class="form-control" id="inputZip5" placeholder="xxx-xxx" />
</div>
<div class="form-group col-md-6">
<label for="firstname">Description</label>
<input type="text" id="firstname" class="form-control" placeholder="About yourself" />
</div>
</div>
<hr class="my-4" />
<div class="form-row">
<p class = "user-notification">Notifications</p>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Mention Alerts</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">In-app Sounds</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckCheckedDisabled" checked>
<label class="form-check-label" for="flexSwitchCheckCheckedDisabled">In-app Notifications</label>
</div>
</div>
<hr class="my-4" />
<div class="row mb-4">
<div class="col-md-6">
<p class = "security">Security</p>
<div class="form-group">
<label for="inputPassword4">Old Password</label>
<input type="password" class="form-control" id="inputPassword5" />
</div>
<div class="form-group">
<label for="inputPassword5">New Password</label>
<input type="password" class="form-control" id="inputPassword5" />
</div>
<div class="form-group">
<label for="inputPassword6">Confirm Password</label>
<input type="password" class="form-control" id="inputPassword6" />
</div>
</div>
<div class="col-md-6">
<p class="mb-2">Password requirements</p>
<p class="small text-muted mb-2">To create a new password, you have to meet all of the following requirements:</p>
<ul class="small text-muted pl-4 mb-0">
<li>Minimum 8 character</li>
<li>At least one special character</li>
<li>At least one number</li>
<li>Can’t be the same as a previous password</li>
</ul>
</div>
</div>
<div id = "button"><button type="submit" class="btn btn-primary">Save Change</button></div>
</form>
</div>
</div>
</div>
</div>
<div class="fixed-bottom">
<div class="navbar navbar-dark bg-primary">
<div class="container-fluid">
<div id="grid">
<div class="bot-nav-img">
<img src="../../images/bootstrap-icons-1.3.0/book-fill.svg" alt="Journal"
height="50vh"/>
</div>
<div class="bot-nav-img">
<a href = "../../landing.html">
<img src="../../images/bootstrap-icons-1.3.0/house-door-fill.svg" alt="Home"
height="50vh"/>
</a>
</div>
<div class="bot-nav-img">
<a href = "../../goals.html">
<img src="../../images/bootstrap-icons-1.3.0/table.svg" alt="Goals"
height="50vh"/>
</a>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!--Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
-->
</body>
</html>
CSS
#image img {
width: 150px;
height: 150px;
}
#button {
margin-bottom: 80px;
text-align: center;
}
解决方案
推荐阅读
- python - cppzmq：使用 zmq::send_multipart 时对非套接字的套接字操作
- java - 对某些逻辑正确使用多态性和继承
- excel - 对现有数据应用宏
- html - 如何将元素的高度设置为等于另一个元素？（包括 Codepen）
- windows - 是否可以为 VirtualAlloc 禁用 ASLR？
- user-interface - MAMP Pro UI 未显示
- c# - 显示来自 DataSet 的数据
- javascript - 减小 sharethis.com 反应按钮的大小
- python-3.x - 云构建通过更改 eu.artifacts 避免计费。
.appspot.com 存储桶到单区域 - r - 如何获得分类变量的百分比和单个选择的总体百分比