堆栈内存溢出
  繁体   English   中英

一个HTML页面中包含多个jQuery脚本不能一起使用

[英]Multiple jQuery Scripts in one HTML page Not working together

 原文  2019-11-25 18:15:40  4   2    javascript/ jquery/ html

问题描述

我有一个包含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>

2 个解决方案

解决方案1
 2  2019-11-25 21:29:25

问题是您有3个函数在很大程度上完成相同的工作，并且它们都共享相同的变量。 而不是使一个函数对所有3个元素都起作用，而不是对每个要素使用3个函数。

请注意，这里不需要id ，只需要类来组织带有匹配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 &amp; 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>

解决方案2
 1 已采纳  2019-11-25 18:41:41

这是一个常见的全局变量冲突问题。 您可以（必须）将它们全部包装到自执行函数中，该函数会将所有已声明的变量保留在其内部。

（冲突）： 

 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(){/*...*/})循环$('.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();
  });
}

这里也使用了该函数，以“保留”内部变量。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 3个jQuery脚本无法在HTML页面中一起使用 HTML工作表中的多个脚本之一不起作用 2个jquery脚本不能一起工作 如何让多个 Jquery 脚本协同工作 Google Map Library Places and Geometry在一个HTML页面中协同工作 当放置在一起时，页面上的多个JQuery元素不起作用 使 2 个 SwiperJS 脚本一起工作 - 当其他 init 脚本添加到同一页面时，第二个不工作 脚本在锚定的 HTML 页面中不起作用 一页中有多个分页脚本 两个脚本不能一起工作
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM