Foundation Slider aktualisiert die Eingabe nicht - zurb-foundation, mops

Auf diese Seite Es gibt einen Schieberegler, der ein Eingabefeld mit Beispiel-HTML-Code aktualisiert. Sie können den gleichen Code auch in der Quelle sehen.

Ich möchte dies in meiner Anwendung verwenden, also habe ich es in meinen Code verpflanzt und in Jade (aka Pug) umgewandelt. Die Quelle sieht nun so aus:

    div.row
div.small-10.columns
div.range-slider(data-slider data-options="display_selector: #days-off-count; initial: 28;")
span.range-slider-handle(role="slider" tabindex="0")
span.range-slider-active-segment
div.small-2.columns
input(type="number" id="days-off-count" value="28")

Und das resultierende HTML sieht so aus (nach der Verschönerung):

<div class="row">
<div class="small-10 columns">
<div data-slider data-options="display_selector: #days-off-count; initial: 28;" class="range-slider">
<span role="slider" tabindex="0" class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
</div>
</div>
<div class="small-2 columns">
<input type="number" id="days-off-count" value="28">
</div>
</div>

Was ist sehr nahe, dass in den Dokumenten angezeigt. Auf der resultierenden Seite wird das Eingabefeld jedoch nicht aktualisiert. Wenn ich das Eingabefeld zu einem Bereich wie in der ändern "Mit Etikett" Beispiel aktualisiert es.

span(id="days-off-count" value="28")

wird

<span id="days-off-count" value="28"></span>

ich habe foundation.js und das .slider.js am unteren Rand der Seite enthalten.

Wenn ich den Wert des Eingabefeldes manuell über die Tastatur ändere, springt der Slider außerdem in diese Position, also gibt es dort eine Art Verbindung.

Die verwendete Software:

  • Ubuntu 14_04
  • Chrom
  • Knoten v0.10.25
  • Express 4.14.0
  • Jade 1.11.0
  • Grundlage v5.5.0

Andere Dinge zu beachten:

  • Die Seite hat mehr als einen Schieberegler, so dass Javascript-Lösungen dies berücksichtigen müssen.

Antworten:

1 für die Antwort № 1

Ich denke, das ist ein Fehler (hasOwnProperty anstelle von hasAttribute # 6221) in der Version von Foundation (5.5.0), die Sie verwenden. Es scheint, dass es ursprünglich nur für Firefox galt, jetzt aber auch für Chrome gilt.

Beispiel mit (gebrochenen) Schiebern ab 5.5.0: jsfiddle.net/tymothytym/jth99pkw/3

Beispiel mit (Arbeits) Schiebereglern aus 5.5.3: jsfiddle.net/tymothytym/tw1we8fk/3

Der Fehler wurde hier behoben: https://github.com/zurb/foundation-sites/commit/896e81f1275eefbbdb84ce4da9004ab059b26d45

Im Grunde gehen Sie zu foundation.slider.js und ändere dies (Zeile 157):

if (settings.display_selector != "") {
$(settings.display_selector).each(function(){
if (this.hasOwnProperty("value")) { // this is the mistake / bug
$(this).val(value);
} else {
$(this).text(value);
}
});
}

zu diesem:

if (settings.display_selector != "") {
$(settings.display_selector).each(function(){
if (this.hasAttribute("value")) { // this should fix it
$(this).val(value);
} else {
$(this).text(value);
}
});
}

Das ist nicht meine Korrektur, es ist das gleiche wie der Patch, aber es sollte bedeuten, dass Sie beim Upgrade nicht Ihren Anwendungscode ändern müssen, um eine Problemumgehung zu berücksichtigen.


0 für die Antwort № 2

1) Vielleicht irre ich mich ... aber du hast die Version nicht angegeben, du gibst ein Beispiel von Foundation v5 ... hast du Foundation v6 nicht installiert?

Probieren Sie dieses Beispiel aus: https://foundation.zurb.com/sites/docs/slider.html

2) Nachdem Sie Ihre js-Dateien hinzugefügt haben, müssen Sie Folgendes haben:

  <script>
$(document).foundation();
</script>

Edit: Entschuldigung, das erste Mal, dass ich nicht alles gelesen habe, ist das Problem vielleicht, dass die Foundation das Attribut "value" verwendet, für das ein Attribut bestimmt ist <input> Stichworte: Wert <button>, <input>, <li>, <option>, <meter>, <progress>, <param> Gibt den Wert des Elements an

Quelle: https://www.w3schools.com/tags/ref_attributes.asp


Verwandte Fragen