Web-Frontend
CSS-Tutorial
Warum funktioniert mein JavaScript-Bereichsschieberegler nicht, wenn er von JSFiddle auf eine externe Seite verschoben wird?
Warum funktioniert mein JavaScript-Bereichsschieberegler nicht, wenn er von JSFiddle auf eine externe Seite verschoben wird?
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>
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;}$('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)'
+ ')'
);
});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
});- Verwenden Sie eine verkürzte Form des Document-Ready-Handlers:
$(function() {
// your code here
});- 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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1664
14
1423
52
1321
25
1269
29
1249
24
Ein Beweis für das Konzept, um Sass schneller zu machen
Apr 16, 2025 am 10:38 AM
Zu Beginn eines neuen Projekts erfolgt die SASS -Zusammenstellung im Blinzeln eines Auges. Dies fühlt sich gut an, besonders wenn es mit Browsersync kombiniert ist, das nachlädt
Ein Vergleich statischer Formanbieter
Apr 16, 2025 am 11:20 AM
Versuchen wir, hier einen Begriff zu prägen: "Statischer Formanbieter". Sie bringen Ihre HTML
Wöchentliche Plattformnachrichten: HTML -Ladeattribut, die Haupt -ARIA -Spezifikationen und Wechsel von Iframe zu Shadow Dom
Apr 17, 2025 am 10:55 AM
In der Zusammenfassung der Plattformnachrichten in dieser Woche stellt Chrome ein neues Attribut für das Laden, Zugänglichkeitspezifikationen für Webentwickler und die BBC -Bewegungen ein
Der Deal mit dem Abschnittselement
Apr 12, 2025 am 11:39 AM
Zwei Artikel veröffentlichten genau den selben Tag:
Multi-Daumen-Schieberegler: Allgemeiner Fall
Apr 12, 2025 am 10:52 AM
In dem ersten Teil dieser zweiteiligen Serie werden beschrieben, wie wir einen Zwei-Daumen-Schieberegler erhalten können. Jetzt sehen wir uns einen allgemeinen Multi-Thumb-Fall an, aber mit einem anderen und
Einige praktisch mit dem HTML-Dialogelement
Apr 16, 2025 am 11:33 AM
Ich schaue mir das HTML -Element zum ersten Mal an. Ich habe es für eine Weile dessen bewusst, aber Haven ' Es wurde es noch nicht für einen Dreh genommen. Es hat einige ziemlich cool und
Wie wir Google -Schriftarten getaggt und Goofonts.com erstellt haben
Apr 12, 2025 pm 12:02 PM
Goofonts ist ein Nebenprojekt, das von einer Entwicklerin und einem Designer-Ehemann signiert wurde, beide große Fans der Typografie. Wir haben Google markiert
Es ist alles in der Kopf
Apr 15, 2025 am 11:01 AM
Der Dokumentkopf ist vielleicht nicht der glamouröseste Teil einer Website, aber was darauf einfließt
