如何使用JavaScript if/else语句使用jQuery代码
所以我有这两个非常熟悉的jQuery代码(在动画中淡入&),但是我希望这些代码中的任何一个只在需要时使用if/else语句。如何使用JavaScript if/else语句使用jQuery代码
我知道没有if/else语句的jQuery,但有没有一种方法可以使用JavaScript来调用使用if/else语句的jQuery代码?
以下是我想要做的: 我有一个游戏,如果点击一个按钮,会发生攻击,JavaScript运行if/else语句并运行代码Math.floor(Math.random()
。将选择的数字分成if/else语句。当if/else语句中的条件为真时,将打印一个字符串(您赢了,或输了或平局)。 但我也想要一个jQuery代码来运行,图像快速淡入和淡出。我怎么做?
function selectChanged() {
attacks = document.getElementById("hits");
if (attacks.value == "not_valid") {
document.getElementById("battle").disabled = true;
} else {
document.getElementById("battle").disabled = false;
}
}
function vvBattle() {
var selection = document.getElementById("hits").value;
var updatedSelection = selection.replace(/_/g, ' ');
var youHit = Math.floor(Math.random() * 11);
if (youHit >= 8) {
document.getElementById("dragonGame").innerHTML = "You hit the bad guy with " + updatedSelection + " and won!";
} else if (youHit > 5) {
document.getElementById("dragonGame").innerHTML = "You nearly had it, but it wasn't enough, he's retreated!";
} else {
document.getElementById("dragonGame").innerHTML = "Your attack was too weak, you lost!";
}
};
$(document).ready(function() {
$(".gamePic").hide();
$(".submit_button").click(function() {
$(".gamePic").fadeIn('slow');
$(".gamePic").fadeOut('slow');
});
}); //I want the above JQ to execute when the condition "if" is true and the code below if "else is true.
$(document).ready(function() {
$(".badGuy").hide();
$(".submit_button").click(function() {
$(".badGuy").fadeIn('slow');
$(".badGuy").fadeOut('slow');
});
});
img {
width: 400px;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="form">
<form>
<select name="hits" id="hits" value="Select" onchange="selectChanged()">
<option value="not_valid">-- select an option --</option>
<option value="attack1">attack1</option>
<option value="attack2">attack2</option>
<option value="attack3">attack3</option>
<option value="attack4">attack4</option>
<option value="attack5">attack5</option>
</select>
<br>
<br>
<input type="button" class="submit_button" id="battle" onclick="vvBattle()" value="Battle" disabled="disabled">
</form>
<p id="dragonGame" class="game1SectionGreen"></p>
</div>
<img class="gamePic" src="http://vignette1.wikia.nocookie.net/halo/images/b/b5/Master-chief-20070918004603376.jpg/revision/latest?cb=20131205015213" />
<img class="badGuy" src="http://i1323.photobucket.com/albums/u599/slikezadesktop/bad-guy-avengers-movie-wallpapers.jpg" />
我jQuery代码不工作在这里,不知道为什么,工作在记事本++。
首先,jQuery只是javascript。它是用JS编写的函数库,为您提供更多的功能和开箱即用的选项。 “JS代码”和“jQuery代码”没有区别,它们是相同的。这就像说你的selectChanged
函数是它自己的代码,与JavaScript代码不同。
其次,你不必围绕每个jQuery语句与$('document').ready()
。如果您在运行代码之前担心DOM加载,请将所有代码包装在其中一个代码中。
考虑到这两样东西,你所要做的就是把你的jQuery代码的if语句的内部:
if (youHit >= 8) {
document.getElementById("dragonGame").innerHTML = "You hit the bad guy with " + updatedSelection + " and won!";
$(".gamePic").hide();
$(".gamePic").fadeIn('slow');
$(".gamePic").fadeOut('slow');
}
这同样适用于任何你想要的事情可做。
您可以根据您的条件计算出classname,然后用它来切换它们。
下面是一个示例:
$(document).ready(function() {
$(".gamePic").hide();
$(".badGuy").hide();
$(".submit_button").click(function() {
var el = ({{if condition here}}) ? ".gamePic": ".badGuy";
$(el).fadeIn('slow');
$(el).fadeOut('slow');
});
});
注:你不应该有多个$(document).ready()
功能。
尝试这样
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="images/favicon.ico">
<title>Try</title>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script>
<![endif]-->
<style>img {
width: 400px;
height: auto;
}</style>
</head>
<body>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script>
function selectChanged() {
attacks = document.getElementById("hits");
if (attacks.value == "not_valid") {
document.getElementById("battle").disabled = true;
} else {
document.getElementById("battle").disabled = false;
}
}
function vvBattle() {
var selection = document.getElementById("hits").value;
var updatedSelection = selection.replace(/_/g, ' ');
var youHit = Math.floor(Math.random() * 11);
if (youHit >= 8) {
document.getElementById("dragonGame").innerHTML = "You hit the bad guy with " + updatedSelection + " and won!";
$(".gamePic").show();
$(".submit_button").click(function() {
$(".gamePic").fadeIn("slow", function() {
$(this).delay(1000).fadeOut("slow");
});
});
} else if (youHit > 5) {
document.getElementById("dragonGame").innerHTML = "You nearly had it, but it wasn't enough, he's retreated!";
} else {
document.getElementById("dragonGame").innerHTML = "Your attack was too weak, you lost!";
$(".badGuy").show();
$(".submit_button").click(function() {
$(".badGuy").fadeIn("slow", function() {
$(this).delay(1000).fadeOut("slow");
});
});
}
};
$(document).ready(function() {
$(".gamePic").hide();
$(".badGuy").hide();
});
</script>
<div id="form">
<form>
<select name="hits" id="hits" value="Select" onchange="selectChanged()">
<option value="not_valid">-- select an option --</option>
<option value="attack1">attack1</option>
<option value="attack2">attack2</option>
<option value="attack3">attack3</option>
<option value="attack4">attack4</option>
<option value="attack5">attack5</option>
</select>
<br>
<br>
<input type="button" class="submit_button" id="battle" onclick="vvBattle()" value="Battle" disabled="disabled">
</form>
<p id="dragonGame" class="game1SectionGreen"></p>
</div>
<img class="gamePic" src="http://vignette1.wikia.nocookie.net/halo/images/b/b5/Master-chief-20070918004603376.jpg/revision/latest?cb=20131205015213" />
<img class="badGuy" src="http://i1323.photobucket.com/albums/u599/slikezadesktop/bad-guy-avengers-movie-wallpapers.jpg" />
</body>
</html>
幸运的是,jQuery是使用Javascript!
你想要做的第一件事是将每个那些为自己的功能:无论你在想
function flashGamePic() {
$(".gamePic").fadeIn('slow');
$(".gamePic").fadeOut('slow');
}
function flashBadGuy() {
$(".badGuy").fadeIn('slow');
$(".badGuy").fadeOut('slow');
}
然后调用函数的if/else语句:
if (youHit >= 8) {
document.getElementById("dragonGame").innerHTML = "You hit the bad guy with " + updatedSelection + " and won!";
flashGamePic();
} else if (youHit > 5) {
document.getElementById("dragonGame").innerHTML = "You nearly had it, but it wasn't enough, he's retreated!";
flashGamePic();
} else {
document.getElementById("dragonGame").innerHTML = "Your attack was too weak, you lost!";
flashBadGuy();
}
这里有一个它的演示全部放在一起: http://codepen.io/JeffreyPia/pen/qNbqjX
*淡入之后,你的第一个函数应该会淡出*这不是它目前的功能! – Jamiec
你可以看看'fadeToggle()' – Rajesh
你能解释你想达到什么吗? – Rajesh
'我知道没有if/else语句的jQuery' jQuery代码***是*** Javascript。 jQuery只是一个库,因此总是可以使用一个if/else语句。图像快速淡入的唯一原因是因为你正在告诉它。如果你想延迟淡出,只需使用'setTimeout' –