stackoom
  简体   繁体   中英

Multiple jQuery Scripts in one HTML page Not working together

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

Question

I have an HTML code with 3 jQuery Scripts and they are not working together correctly can SomeOne Help me to solve this, please

I do to solve this problem as I don't have any experience in jQuery

and how can I fix this issue?

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>

2 answers

solution1
 2  2019-11-25 21:29:25

The issue is that you have 3 functions that largely do the same thing and they all share the same variable. Instead of 3 functions that work on one element each, make one function that works on all 3 elements.

Note that no id s are needed here, just classes to organize the sets of radio buttons with the matching option elements.

See the comments inline: 

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

solution2
 1 ACCPTED  2019-11-25 18:41:41

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.

(conflict): 

 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>

(no conflict): 

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

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.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question 3 jQuery Scripts Not working together in HTML page One of Multiple Scripts in HTML Sheet Not Working 2 jquery scripts aren't working together How to get multiple Jquery scripts to work together Google Map Library Places and Geometry working together in one HTML page Multiple JQuery elements on a page not working when placed together Making 2 SwiperJS scripts work together - 2nd one not working when other init script is added to same page Scripts not working in anchored HTML page Multiple pagination scripts in one page Two scripts not working together
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM