Pourquoi mon curseur de plage JavaScript ne fonctionne-t-il pas lorsqu'il est déplacé de JSFiddle vers une page externe ?-tutoriel CSS-php.cn

Pourquoi mon curseur de plage JavaScript ne fonctionne-t-il pas lorsqu'il est déplacé de JSFiddle vers une page externe ?

DDD

Libérer： 2024-12-16 18:21:18

original

331 Les gens l'ont consulté

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

Le code JSFiddle trébuche sur une page externe

Dans une tentative de migration du code fonctionnel de JSFiddle vers une page externe, un utilisateur rencontre un comportement inattendu où le composant JavaScript cesse de fonctionner .

Configuration du code

L'utilisateur a fourni les éléments HTML, CSS et JavaScript suivants code :

<body>

Copier après la connexion

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;}

Copier après la connexion

$('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)'
            + ')'
            ); 
});

Copier après la connexion

Racine du problème

Malgré le placement du code dans les fichiers HTML, JavaScript et CSS de la page externe, la partie JavaScript n'a pas pu s'exécuter.

L'idée clé vient du fait que JSFiddle place le code JavaScript de l'utilisateur dans un gestionnaire de chargement. Par conséquent, le code n’est exécuté qu’une fois la page entière chargée. Cependant, dans la page externe, le code JavaScript a été positionné dans , où il s'est exécuté avant que les éléments d'entrée n'aient été analysés.

Remède

Pour remédier au problème, l'utilisateur peut utilisez l'une des trois solutions suivantes :

Introduisez le code dans un gestionnaire de chargement ou, de préférence, de document prêt, par exemple,

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

Copier après la connexion

Utilisez une forme abrégée de gestionnaire de document prêt :

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

Copier après la connexion

Déplacez l'emplacement de la balise de script contenant le Code JavaScript jusqu'à la fin de la page, permettant d'analyser les éléments avant l'exécution du code.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!