jQuery zu Javascript

Question

BEARBEITEN ICH FAND ES HERAUS. Ich musste nur die jquery hinzufügen und in Joomla tun Sie dies, indem Sie Ihre Vorlage/index.php und fügen diese Zeile von "// Fügen Sie Javascript Frameworks" JHtml::_('jquery.framework');.

ARBEITS

ich brauche etwas Hilfe diesen Code zu Javascript konvertieren.

Derzeit funktioniert es nicht in meinem Browser mit jQuery. Ich lade die AJAX-Bibliothek und alles, aber es funktioniert nicht. Ich habe gerade ein Drop-down und div's mit den gleichen IDs hinzugefügt, die ich verwende, um es einfacher zu machen.

Wenn ich das Formular vorschaue, das ich in der Software erstellt habe, die ich verwende, funktioniert es wie beabsichtigt mit diesem jQuery-Code; Sobald ich jedoch die Änderungen im Formular speichere und zur Live-Site gehe, tut es nichts. (Die Software ist RSForm Pro für Joomla .. Ja, ich bin noch neu dazu)

Jede Hilfe ist willkommen.

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

Wie in den Kommentaren des OP gewählt:

Sind Sie dies von localhost auf Chrome läuft? Versuchen Sie es mit Firefox oder starten Sie einen Webserver (wie WAMP, XAMPP, LAMP oder eine beliebige Ihrer Wahl). Chrome blockiert localhost Javascript, so dass das Problem so dumm sein kann. Wenn nicht, lass es mich wissen :)

Answer 2

Hier einige Lösung für Sie, aber wenn man es auf diese Weise nicht verwenden möchten, können Sie Teile des Codes extrahieren, ich habe es richtig für 5 Optionen getan, und 5 divs, und das Skript wird auf den Wert, den Sie ausgewählt haben, eine Schleife machen und sie zeigen, alle anderen werden Schleifen und verstecken.

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

Seien Sie sicher, dass die Bibliothek vor Ihrem Skript zu laden, direkt über dem Schließkörper-Tag. Sie könnten auch versuchen, $ (this) .val() anstelle von this.value zu verwenden. Ich habe ein schnelles jQuery-Skript gemacht, falls es in Ihrem Browser korrekt funktioniert und switch-Anweisung statt tan if-Anweisung verwendet.

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>