一个HTML页面中包含多个jQuery脚本不能一起使用 [英] Multiple jQuery Scripts in one HTML page Not working together
本文介绍了一个HTML页面中包含多个jQuery脚本不能一起使用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个包含3个jQuery脚本的HTML代码，但它们无法正常工作 有人可以帮我解决这个问题吗
I have an HTML code with 3 jQuery Scripts and they are not working together correctly can SomeOne Help me to solve this, please
我确实解决了这个问题，因为我没有jQuery的经验
I do to solve this problem as I don't have any experience in jQuery
以及如何解决此问题?
UPDATE现在可以使用，但是一次只能使用一个下拉菜单
UPDATE It works now but one drop-down menu at a time how can I make them work together
<!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>
推荐答案
这是一个常见的全局变量冲突问题.您可以(必须)将它们全部包装到自执行函数中，该函数会将所有已声明的变量保留在自己的内部.
It's a common global variable conflict issue. You can (must) wrap them all to self-executing function, which will keep all declared variables inside its own.
(冲突):
var test = $('#btn-1').text();
$('#btn-1').on('click', function(){ console.log( test ); });
var test = $('#btn-2').text();
$('#btn-2').on('click', function(){ console.log( test ); });
var test = $('#btn-3').text();
$('#btn-3').on('click', function(){ console.log( test ); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn-1">111</button>
<button id="btn-2">222</button>
<button id="btn-3">333</button>
(无冲突):
(function(){
var test = $('#btn-1').text();
$('#btn-1').on('click', function(){ console.log( test ); });
})();
(function(){
var test = $('#btn-2').text();
$('#btn-2').on('click', function(){ console.log( test ); });
})();
(function(){
var test = $('#btn-3').text();
$('#btn-3').on('click', function(){ console.log( test ); });
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn-1">111</button>
<button id="btn-2">222</button>
<button id="btn-3">333</button>
但是，在您的情况下，至少最好循环运行所有内容(或为所有元素添加通用类并使用$('.class').each(function(){/*...*/})循环):
But in your case, at least would be better to run everything in loop (or adding a general class for all elements and loop with $('.class').each(function(){/*...*/})):
for( var i = 2; i < 5; i++ ){
doStuff( i );
}
function doStuff( index ){
var options = $("#DropDownList" + index).html();
$('#DropDownList' + index + ' :not([value^="Dr"])').remove();
$('input:radio').change(function(e) {
var text = $(this).val();
$("#DropDownList" + index).html(options);
$('#DropDownList' + index + ' :not([value^="' + text.substr(0, 3) + '"])').remove();
});
}
这里也使用了该函数，以保留"内部变量.
Here was used the function as well, to "keep" variables inside.
这篇关于一个HTML页面中包含多个jQuery脚本不能一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
