jQuery to Javascript

Question

編輯我發現了它。我只需要添加jquery，並在Joomla中執行此操作，方法是轉到template/index.php並通過「//添加Javascript框架」JHtml::_('jquery.framework');添加此行。

WORKING

我需要一些幫助，這個代碼轉換爲JavaScript的。

目前它不能在我的瀏覽器中使用jQuery。我加載AJAX庫和一切，但它不工作。我只是添加了一個下拉列表和div，它們的ID與我使用的ID相同，以使它更容易。

如果我預覽了我在軟件中創建的表單，我正在使用它按照預期使用此jQuery代碼工作;但是，一旦我保存了對錶單的更改並轉到活動網站，它就沒有做任何事情。 （該軟件是RSForm專業爲Joomla ..是的，我還是新來的）

任何幫助表示讚賞。

$(document).ready(function() { 
 
    $('#DeliveryPlaces').on('change', function() { 
 
    if (this.value == '1') { 
 
     $("#LocationDelivery1").show(); 
 
     $("#LocationDelivery2").hide(); 
 
     $("#LocationDelivery3").hide(); 
 
     $("#LocationDelivery4").hide(); 
 
     $("#LocationDelivery5").hide(); 
 
    } else if (this.value == '2') { 
 
     $("#LocationDelivery1").show(); 
 
     $("#LocationDelivery2").show(); 
 
     $("#LocationDelivery3").hide(); 
 
     $("#LocationDelivery4").hide(); 
 
     $("#LocationDelivery5").hide(); 
 
    } else if (this.value == '3') { 
 
     $("#LocationDelivery1").show(); 
 
     $("#LocationDelivery2").show(); 
 
     $("#LocationDelivery3").show(); 
 
     $("#LocationDelivery4").hide(); 
 
     $("#LocationDelivery5").hide(); 
 
    } else if (this.value == '4') { 
 
     $("#LocationDelivery1").show(); 
 
     $("#LocationDelivery2").show(); 
 
     $("#LocationDelivery3").show(); 
 
     $("#LocationDelivery4").show(); 
 
     $("#LocationDelivery5").hide(); 
 
    } else if (this.value == '5') { 
 
     $("#LocationDelivery1").show(); 
 
     $("#LocationDelivery2").show(); 
 
     $("#LocationDelivery3").show(); 
 
     $("#LocationDelivery4").show(); 
 
     $("#LocationDelivery5").show(); 
 
    } else { 
 
     $("#LocationDelivery1").hide(); 
 
     $("#LocationDelivery2").hide(); 
 
     $("#LocationDelivery3").hide(); 
 
     $("#LocationDelivery4").hide(); 
 
     $("#LocationDelivery5").hide(); 
 
    } 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="DeliveryPlaces"> 
 
    <option value="-">-</option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
    <option value="5">5</option> 
 
</select> 
 

 
<div id="LocationDelivery1">LocationDelivery1</div> 
 
<div id="LocationDelivery2">LocationDelivery2</div> 
 
<div id="LocationDelivery3">LocationDelivery3</div> 
 
<div id="LocationDelivery4">LocationDelivery4</div> 
 
<div id="LocationDelivery5">LocationDelivery5</div>

Answer 1

正如評論由OP選擇：

你從本地主機上運行的Chrome呢？嘗試使用Firefox或啓動Web服務器（如WAMP，XAMPP，LAMP或您選擇的任何一種）。 Chrome會阻止本地主機的JavaScript，所以問題可能會像這樣愚蠢。如果沒有，請讓我知道:)

Answer 2

下面是一些對你的解決方案，但如果你不希望使用這種方式，你可以提取部分代碼，我已經做了正確的5個選項，並5個div，並且腳本將循環顯示您選擇的值並顯示它們，其他所有其他值將循環並隱藏。

document.getElementById("DeliveryPlaces").onchange = function() { 
 
    var value = parseInt(this.value == '-' ? 0 : this.value); 
 
    // show 
 
    if (value>0) { 
 
     for (var i=1; i<=value; i++) { 
 
      document.getElementById("LocationDelivery"+i).style.display = 'block'; 
 
      } 
 
    } 
 
    // hide 
 
    if (value<=4) { 
 
     for (var i=value+1; i<=5; i++) { 
 
      document.getElementById("LocationDelivery"+i).style.display = 'none'; 
 
      } 
 
    } 
 
};

<select id="DeliveryPlaces"> 
 
    <option value="-">-</option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
    <option value="5">5</option> 
 
</select> 
 

 
<div id="LocationDelivery1">LocationDelivery1</div> 
 
<div id="LocationDelivery2">LocationDelivery2</div> 
 
<div id="LocationDelivery3">LocationDelivery3</div> 
 
<div id="LocationDelivery4">LocationDelivery4</div> 
 
<div id="LocationDelivery5">LocationDelivery5</div>

Answer 3

要確保你的腳本之前加載庫，就在結束標記上方。此外，你可以嘗試使用$（this）.val（）而不是this.value。我已經做了一個快速的jQuery腳本，以防它在瀏覽器上正常工作，並且使用switch語句而不是if語句。

的jsfiddle：https://jsfiddle.net/noLz7wr3/

$(document).ready(function() { 
 
\t $('#DeliveryPlaces').on('change', function(e) { 
 
    \t e.preventDefault(); 
 
    $('.delivery').hide(); 
 
    switch($(this).val()){ 
 
    \t case "1": 
 
     \t $('#LocationDelivery1').show(); 
 
     break; 
 
    \t case "2": 
 
     \t $('#LocationDelivery2').show(); 
 
     break; 
 
    \t case "3": 
 
     \t $('#LocationDelivery3').show(); 
 
     break; 
 
    \t case "4": 
 
     \t $('#LocationDelivery4').show(); 
 
     break; 
 
    \t case "5": 
 
     \t $('#LocationDelivery5').show(); 
 
     break; 
 
    } 
 
    }) 
 
});

.delivery { 
 
    padding-top: 20px; 
 
    display: none; 
 
}

<form> 
 
    <select id="DeliveryPlaces"> 
 
    <option value selected disabled>Select Location Delivery</option> 
 
    <option value="1">Location Delivery 1</option> 
 
    <option value="2">Location Delivery 2</option> 
 
    <option value="3">Location Delivery 3</option> 
 
    <option value="4">Location Delivery 4</option> 
 
    <option value="5">Location Delivery 5</option> 
 
    
 
    </select> 
 
</form> 
 

 
    <div class="delivery" id="LocationDelivery1">Location Delivery 1</div> 
 
    <div class="delivery" id="LocationDelivery2">Location Delivery 2</div> 
 
    <div class="delivery" id="LocationDelivery3">Location Delivery 3</div> 
 
    <div class="delivery" id="LocationDelivery4">Location Delivery 4</div> 
 
    <div class="delivery" id="LocationDelivery5">Location Delivery 5</div>