javascript - 一个 HTML 页面中的多个 jQuery 脚本不能一起工作
问题描述
我有一个带有 3 个 jQuery 脚本的 HTML 代码,它们不能正常协同工作,请有人帮我解决这个问题
我确实要解决这个问题,因为我没有任何 jQuery 经验
我该如何解决这个问题?
更新它现在可以工作,但一次只有一个下拉菜单,我怎样才能让它们一起工作
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Availabe Restaurants:
<br>
Burgers:
<label><input type="radio" name="test" value="Garage" /> Burger Garage</label>
<label><input type="radio" name="test" value="Burger" /> Hardee's</label>
<label> <input type="radio" name="test" checked="checked" value="Factory" /> Burger Factory & More</label>
<br>
<select ID="DropDownList2" Height="18px" Width="187px">
<option Value="Factory_Style_1">Turbo Chicken</option>
<option Value="Factory_Style_2">Twin Turbo Chicken</option>
<option Value="Factory_Style_3">Garage Burger</option>
<option Value="Burger_Style_1">Chicken Fille</option>
<option Value="Burger_Style_2">Grilled Chicken Fillet</option>
<option Value="Burger_Style_3">Jalapeno Chicken</option>
<option Value="Garage_Style_1">Original Burger</option>
<option Value="Garage_Style_2">Twin Turbo Chicken</option>
<option Value="Garage_Style_3">Shuwa Burger</option>
</select>
<br>
Desserts:
<label><input type="radio" name="test1" checked="checked" value="Dip" /> Dip N Dip</label>
<label><input type="radio" name="test1" value="Camel" /> Camel Cookies</label>
<label> <input type="radio" name="test1" value="Ravenna" /> Ravenna Kunafa</label>
<br>
<select ID="DropDownList3" Height="18px" Width="187px">
<option Value="Dip_Style_1">Brownies Crepe</option>
<option Value="Dip_Style_2">Fettuccine Crepe</option>
<option Value="Dip_Style_3">Cream Puff Pyramid</option>
<option Value="Camel_Style_1">Brownie Fondant</option>
<option Value="Camel_Style_2">Lotus Pancake</option>
<option Value="Camel_Style_3">Camel Lava</option>
<option Value="Ravenna_Style_1">Konafa With Chocolate</option>
<option Value="Ravenna_Style_2">Konafa Mabrooma With Cheese</option>
<option Value="Ravenna_Style_3">Konafa Mabrooma With Cream</option>
</select>
<br>
Beverages:
<option>Dr.Shake</option>
<option>Juice Lab</option>
<option>Aseer Time</option>
<label><input type="radio" name="test2" checked="checked" value="Dr" />Dr.Shake</label>
<label><input type="radio" name="test2" value="Juice" /> Juice Lab</label>
<label> <input type="radio" name="test2" value="Aseer" /> Aseer Time</label>
<br>
<select ID="DropDownList4" Height="18px" Width="187px">
<option Value="Dr_Style_1">Pressure Milkshake</option>
<option Value="Dr_Style_2">Thermometer Milkshake</option>
<option Value="Dr_Style_3">Brain Recovery Milkshake</option>
<option Value="Juice_Style_1">G Lab</option>
<option Value="Juice_Style_2">Summer Vimto</option>
<option Value="Juice_Style_3">Summer Bubble Gum</option>
<option Value="Aseer_Style_1">Hormone Happiness</option>
<option Value="Aseer_Style_2">The King</option>
<option Value="Aseer_Style_3">Berry Smothey</option>
</select>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
(function(){
var options = $("#DropDownList2").html();
$('#DropDownList2 :not([value^="Fac"])').remove();
$('input:radio').change(function(e) {
var text = $(this).val();
$("#DropDownList2").html(options);
$('#DropDownList2 :not([value^="' + text.substr(0, 3) + '"])').remove();});
})();
(function(){
var options = $("#DropDownList3").html();
$('#DropDownList3 :not([value^="Dip"])').remove();
$('input:radio').change(function(e) {
var text = $(this).val();
$("#DropDownList3").html(options);
$('#DropDownList3 :not([value^="' + text.substr(0, 3) + '"])').remove();});
})();
(function(){
var options = $("#DropDownList4").html();
$('#DropDownList4 :not([value^="Dr"])').remove();
$('input:radio').change(function(e) {
var text = $(this).val();
$("#DropDownList4").html(options);
$('#DropDownList4 :not([value^="' + text.substr(0, 3) + '"])').remove();});
})();
</script>
</body>
</html>
解决方案
问题是你有 3 个函数在很大程度上做同样的事情,并且它们都共享相同的变量。不是每个对一个元素起作用的 3 个函数,而是对所有 3 个元素起作用的一个函数。
请注意,id
这里不需要 s,只需要使用匹配option
元素组织单选按钮集的类。
见内联评论:
<!DOCTYPE html>
<html>
<head>
<title>Order Selection</title>
<style>
/* Do all your styling in CSS not inline with the HTML */
select { width:187px; display:block; margin:10px; }
.hidden { display:none; }
fieldset { margin-top:1em; margin-bottom:1em; }
legend { font-weight:bold; }
</style>
</head>
<body>
<h1>Availabe Restaurants:</h1>
<fieldset>
<legend>Burgers:</legend>
<label><input type="radio" name="burgers" value="Garage"> Burger Garage</label>
<label><input type="radio" name="burgers" value="Burger"> Hardee's</label>
<label><input type="radio" name="burgers" value="Factory"> Burger Factory & More</label>
<select name="burgers">
<option value="">--- Select Burger ---</option>
<option class="Garage" value="Garage_Style_1">Original Burger</option>
<option class="Garage" value="Garage_Style_2">Twin Turbo Chicken</option>
<option class="Garage" value="Garage_Style_3">Shuwa Burger</option>
<option class="Burger" value="Burger_Style_1">Chicken Fille</option>
<option class="Burger" value="Burger_Style_2">Grilled Chicken Fillet</option>
<option class="Burger" value="Burger_Style_3">Jalapeno Chicken</option>
<option class="Factory" value="Factory_Style_1">Turbo Chicken</option>
<option class="Factory" value="Factory_Style_2">Twin Turbo Chicken</option>
<option class="Factory" value="Factory_Style_3">Garage Burger</option>
</select>
</fieldset>
<fieldset>
<legend>Beverages:</legend>
<label><input type="radio" name="beverages" value="Dr" />Dr.Shake</label>
<label><input type="radio" name="beverages" value="Juice"> Juice Lab</label>
<label> <input type="radio" name="beverages" value="Aseer"> Aseer Time</label>
<select name="beverages">
<option value="">--- Select Beverage ---</option>
<option class="Dr" value="Dr_Style_1">Pressure Milkshake</option>
<option class="Dr" value="Dr_Style_2">Thermometer Milkshake</option>
<option class="Dr" value="Dr_Style_3">Brain Recovery Milkshake</option>
<option class="Juice" value="Juice_Style_1">G Lab</option>
<option class="Juice" value="Juice_Style_2">Summer Vimto</option>
<option class="Juice" value="Juice_Style_3">Summer Bubble Gum</option>
<option class="Aseer" value="Aseer_Style_1">Hormone Happiness</option>
<option class="Aseer" value="Aseer_Style_2">The King</option>
<option class="Aseer" value="Aseer_Style_3">Berry Smothey</option>
</select>
</fieldset>
<fieldset>
<legend>Desserts:</legend>
<label><input type="radio" name="desserts" value="Dip"> Dip N Dip</label>
<label><input type="radio" name="desserts" value="Camel"> Camel Cookies</label>
<label> <input type="radio" name="desserts" value="Ravenna"> Ravenna Kunafa</label>
<select name="desserts">
<option value="">--- Select Dessert ---</option>
<option class="Dip" value="Dip_Style_1">Brownies Crepe</option>
<option class="Dip" value="Dip_Style_2">Fettuccine Crepe</option>
<option class="Dip" value="Dip_Style_3">Cream Puff Pyramid</option>
<option class="Camel" value="Camel_Style_1">Brownie Fondant</option>
<option class="Camel" value="Camel_Style_2">Lotus Pancake</option>
<option class="Camel" value="Camel_Style_3">Camel Lava</option>
<option class="Ravenna" value="Ravenna_Style_1">Konafa With Chocolate</option>
<option class="Ravenna" value="Ravenna_Style_2">Konafa Mabrooma With Cheese</option>
<option class="Ravenna" value="Ravenna_Style_3">Konafa Mabrooma With Cream</option>
</select>
</fieldset>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
// Hide the dropdown lists until a radio button selection is made
$("select").hide();
// Set up a change event handler for each of the radio buttons
$('input:radio').on("change", updateChoices);
function updateChoices(e) {
// Show the appropriate list based on the name of the radio button that was changed
$('select[name="' + this.name + '"]').show();
// Reset any previously selected option in the list back to the default
$('select[name="' + this.name + '"]').val($('select[name="' + this.name + '"] option:first').val());
// Update the <option> elements in the corresponding <select>
$('select[name="' + this.name + '"] option').each(function(index,element){
// If the option has the same class as the radio button that was changed...
if($(element).hasClass(e.target.value)){
$(element).show(); // Show the option
} else {
$(element).hide(); // Hide the option
}
});
}
</script>
</body>
</html>
推荐阅读
- scala - 在 Spark 中将可选参数建模为 UDF 的最佳方法是什么?
- laravel - 语法错误,我的 laravel 代码中的文件意外结束
- javascript - 将巨大数组中的每个 JavaScript 对象与另一个对象合并
- python - 如何打印2条水平线
- angular - npm WARN deprecated core-js@2.6.11: core-js@<3 不再维护,由于问题数量不推荐使用
- windows - 卸载后在 Windows 功能中看不到 Internet explore
- reactjs - Reactjs TypeError:无法获取未定义或空引用的属性“字符串”
- scala - 如何正确进行涉及异步方法的错误处理
- php - 我可以在脚本中将 PHP 函数设为“私有”吗?
- c# - 访问 List 中的元素
在 C# 中使用十进制值