堆棧內存溢出
  簡體   English   中英

一個HTML頁面中包含多個jQuery腳本不能一起使用

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

 原文  2019-11-25 18:15:40  2   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