提问人：TheHiddenArtemis 提问时间：4/4/2023 更新时间：4/4/2023 访问量：28
两个不同的 window.open（location） 在不同的 if 块中进入同一目标
Two Different window.open(location) in different if blocks going to the same destination
问：
我正在编写一个学校项目，代码是这样的。
- 它向用户显示可供选择的建议，并且数据以特定值作为复选框存储。
- jQuery 和 js 代码选中复选框，相应的值存储在各自的变量中。
- 比较变量，然后选择最多的一种类型将使用 “window.open（'location'，'target'）;”
**问题来了。
** 与第一个“if 块”一样，代码工作得很好。它直接指向“comedy_movie_suggestion”页面。
当谈到第二个“else if”部分时（也尝试单独使用“if”;没有区别），代码仍然将我引导到“comedy_movie_suggestion”页面。
//如果我从 Google 提供网页（url），它会导致正确的页面，但关键是它不会将我带到“drama_movie_suggestion”页面。
文件名正确，是的，它们在同一个文件夹中。
PS：我还放了我的html和css代码，以便于您测试。
如果您有任何问题，请随时澄清任何事情。
谢谢。
这是我的代码（Html 和 js 在同一个文件中，因为我只检查一个逻辑）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title> Crux - Your missing piece</title>
<!--logo on tab title-->
<link rel="icon" href="images/logo.png" type="image/png"/>
<!--link to Css-->
<link rel="stylesheet" href="Style_movie_suggestion.css">
</head>
<body>
<header>
<img id="logo" src="images/logo+name.png" alt="Crux">
</header>
<div id="intro">
<p> <br>      Please tick the checkbox for the movies you like. After your submission, we will take you to one of the treasure boxes which will contain <em><strong>Crux's top 5 movies list for you.</strong></em> When you get there... click on the movie poster of the one you would like to watch!</p>
</div>
<div id="parent">
<ul id="learn">
<!--Guardian of the Galaxy-->
<li>
<input id="guardian" type="checkbox" class="comedy">
<label for="guardian" ><img src="images/learn/guardian.jpg" alt="Guardian Of the Galaxies poster here"></label>
<br>
</li>
<!--The Bird Box-->
<li>
<input id="bird_box" type="checkbox" class="drama">
<label for="bird_box"><img src="images/learn/birdbox.jpg" alt="The Bird Box poster here."> </label>
</li>
<!--Love and Monster-->
<li>
<input id="love" type="checkbox" class="comedy">
<label for="love"> <img src="images/learn/loveAndMonster.jpg" alt="Love and Monsters poster here."></label>
</li>
<!--Death On the Nile-->
<li>
<input id="nile" type="checkbox" class="comedy">
<label for="nile"> <img src="images/learn/deathOnTheNile.jpg" alt="Death on the Nile poster here."> </label>
</li>
<!--The King-->
<li>
<input id="theKing" type="checkbox" class="drama">
<label for="theKing"> <img src="images/learn/TheKing.jpg"> </label>
</li>
<!--guardian-->
<li>
<input id="army" type="checkbox" class="comedy">
<label for="army"> <img src="images/learn/armyOfThieves.jpg" alt="Army of Thieves poster here."></label>
</li>
<!--The Everest-->
<li>
<input id="everest" type="checkbox" class="drama">
<label for="everest"> <img src="images/learn/everest.jpg" alt="The Everest poster here."></label>
</li>
<!--Shazam-->
<li>
<input id="shazam" type="checkbox" class="comedy">
<label for="shazam"> <img src="images/learn/shazam.jpg" alt="Shazam poster here."></label>
</li>
<!--Suicide Squad-->
<li>
<input id="squad" type="checkbox" class="comedy">
<label for="squad"> <img src="images/learn/suicide.jpg" alt="Suicide Squad poster here."></label>
</li>
<!--The Good Nurse-->
<li>
<input id="GoodNurse" type="checkbox" class="drama">
<label for="GoodNurse"> <img src="images/learn/GoodNurse.jpg"> </label>
</li>
</ul>
</div>
<div id="for_button">
<button id="bt1">Continue</button>
</div>
<!--Link to jQuery-->
<script
type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js">
</script>
<script>
$(function(){
$("#bt1").click(function(){
var comedy = ($("#parent .comedy:checkbox:checked").length);
var drama = ($("#parent .drama:checkbox:checked").length);
var romance = ($("#parent .romance:checkbox:checked").length);
if (comedy>drama && comedy>romance){
window.open('comedy_suggestion.html','_blank');
}
else if (drama>comedy && drama>romance){
window.alert("You love drama movies.");
window.open("drama_suggestion.html",'_blank');
}
else if (romance>comedy && romance>drama){
alert("you love romance movies");
}
else if (comedy==drama && comedy>romance){
alert("You love both comedy and drama");
}
else if(drama==romance && drama>comedy){
alert("You love both drama and romance");
}
else if (comedy==romance && comedy>drama){
alert("You love both comedy and romance");
}
else if (drama==comedy && comedy==romance && drama!=0 && comedy!=0 && romance!=0){
alert("You love all geners of movies equally");
}
else{
alert("choose at least one movie");
}
});
});
</script>
<!--icons installation-->
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>
Css 在这里
@charset "utf-8";
/* CSS Document for Styling Comedy movies suggestions page */
body{
backdrop-filter: blur(20px);
background-color: black;
color: #d4af37;
font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
}
#nav{
list-style-type: none;
display: flex;
justify-content: flex-end;
}
/*for img as a checkbox*/
#learn {
list-style-type: none;
margin-top: 5vh;
text-align: center;
}
#learn li{
display: inline-block;
margin: 0 10px 0 10px;
}
input[type="checkbox"]{
display: none;
}
label {
padding: 10px;
display: inline-block;
position: relative;
margin: 10px;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
label::before {
background-color: white;
color: white;
content: " ";
display: block;
border-radius: 50%;
position: absolute;
top: -5px;
left: -5px;
width: 25px;
height: 25px;
text-align: center;
line-height: 28px;
transition-duration: 0.4s;
transform: scale(0);
}
label img {
transition-duration: 0.2s;
transform-origin: 50% 50%;
}
:checked+label::before {
content: "✓";
background-color: #d4af37;
transform: scale(1);
}
:checked+label img {
transform: scale(0.9);
z-index: -1;
}
nav a{
color: #d4af37;
text-decoration: none;
margin-right: 4.5em;
font-size: 17pt;
}
a:after {
content: "";
display: block;
width: 0;
border-bottom: 1px solid;
margin-right: 4em;
transition:all 0.3s linear 0s;
}
a:hover:after {
width: 65%;
}
header{
text-align: center;
}
p{
text-align: justify;
margin: 0 17px 0 17px;
}
.display_suggestion{
margin-left: 2em;
margin-right: 3em;
width: 95%;
text-align: center;
display: flex;
}
.movies{
margin: 0 10px 0 10px;
}
img{
width: 14em;
height: 23em;
border-radius: 5px;
}
#logo{
width: 19em;
height: 5em;
}
#for_button{
text-align: center;
}
#bt1{
height: 3em;
width: 9em;
border-radius: 10px;
color:black;
background-color: #d4af37;
}
@media screen and (max-width:1500px) {
.display_suggestion{
margin-left: 3em;
margin-right: 3em;
width: 95%;
text-align: center;
display:flex;
flex-direction: column;
}
nav a{
margin-right: 2em;
}
}
如果我从 Google 提供网页（网址），它会导致正确的页面，但关键是它不会将我带到“drama_movie_suggestion”页面。
文件名是正确的，是的，它们在同一个文件夹中。
我希望它指向正确的页面。
答： 暂无答案
上一个：无法重新打开图层
评论