Warum funktioniert mein JavaScript-Bereichsschieberegler nicht, wenn er von JSFiddle auf eine externe Seite verschoben wird?-CSS-Tutorial-php.cn

Warum funktioniert mein JavaScript-Bereichsschieberegler nicht, wenn er von JSFiddle auf eine externe Seite verschoben wird?

DDD

Freigeben： 2024-12-16 18:21:18

Original

330 Leute haben es durchsucht

Why Doesn't My JavaScript Range Slider Work When Moved from JSFiddle to an External Page?

JSFiddle-Code stolpert auf externer Seite

Beim Versuch, Funktionscode von JSFiddle auf eine externe Seite zu migrieren, stößt ein Benutzer auf unerwartetes Verhalten, bei dem die JavaScript-Komponente nicht mehr funktioniert .

Code-Setup

Der Benutzer hat das folgende HTML, CSS und JavaScript bereitgestellt Code:

<body>

Nach dem Login kopieren

input[type="range"]{
  -webkit-appearance: none;
  -moz-apperance: none;
  border-radius: 6px;
  width: 225px;
  height: 6px;
  border: 2px solid #eceef1;
  outline:none;
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0.15, #eceef1),
    color-stop(0.15, #0c0d17)
  ); }

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  background-color: #1ec2c5;
  border: 3px solid #000000;
  height: 25px;
  width: 25px;
  border-radius: 20px;}

Nach dem Login kopieren

$('input[type="range"]').change(function () {
var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));

$(this).css('background-image',
            '-webkit-gradient(linear, left top, right top, '
            + 'color-stop(' + val + ', #eceef1), '
            + 'color-stop(' + val + ', #0c0d17)'
            + ')'
            ); 
});

Nach dem Login kopieren

Ursache des Problems

Obwohl der Code in die HTML-, JavaScript- und CSS-Dateien der externen Seite eingefügt wurde, konnte der JavaScript-Teil nicht ausgeführt werden.

Die wichtigste Erkenntnis ergab sich aus der Tatsache, dass JSFiddle den JavaScript-Code des Benutzers in einem Onload-Handler platziert. Daher wird der Code erst ausgeführt, nachdem die gesamte Seite geladen ist. Auf der externen Seite wurde das JavaScript jedoch im positioniert, wo es ausgeführt wurde, bevor die Eingabeelemente analysiert wurden.

Abhilfe

Der Benutzer kann das Problem beheben Verwenden Sie eine von drei Lösungen:

Schließen Sie den Code in einen Onload- oder vorzugsweise Document-Ready-Handler ein. z.B.

$(document).ready(function() {
    // your code here
});

Nach dem Login kopieren

Verwenden Sie eine verkürzte Form des Document-Ready-Handlers:

$(function() {
    // your code here
});

Nach dem Login kopieren

Verschieben Sie die Platzierung des Skript-Tags, das das enthält JavaScript-Code am Ende der Seite, sodass Elemente analysiert werden können, bevor der Code ausgeführt wird.

Das obige ist der detaillierte Inhalt vonWarum funktioniert mein JavaScript-Bereichsschieberegler nicht, wenn er von JSFiddle auf eine externe Seite verschoben wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!