如何使用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代碼不工作在這裏，不知道爲什麼，工作在記事本++。

來源

2016-06-09 Sat10

你可以看看'fadeToggle（）' – Rajesh

你能解釋你想達到什麼嗎？ – Rajesh

'我知道沒有if/else語句的jQuery' jQuery代碼***是*** Javascript。 jQuery只是一個庫，因此總是可以使用一個if/else語句。圖像快速淡入的唯一原因是因爲你正在告訴它。如果你想延遲淡出，只需使用'setTimeout' –

首先，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'); 
}

這同樣適用於任何你想要的事情可做。

來源

2016-06-09 14:52:00 Pabs123

您可以根據您的條件計算出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()功能。

來源

2016-06-09 14:53:02 Rajesh

嘗試這樣

代碼

<!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>

來源

2016-06-09 15:10:40

幸運的是，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

來源

2016-06-09 15:17:02 JeffreyPia

*淡入之後，你的第一個函數應該會淡出*這不是它目前的功能！ – Jamiec

如何使用JavaScript if/else語句使用jQuery代碼

回答

相關問題