benutzerdefinierte Schriftart-Selektor ändert nur die Schriftart einmal

Question

Ich bin ratlos, ich versuche zu ermöglichen, Benutzer die Schriftfamilie einiger Textausgabe auswählen. Der Code läuft darauf hinaus grundsätzlich auf diesem nach unten:

<div id='output'> 
    The quick brown fox jumps over the lazy dog 
</div> 
<select id='font-select'> 
    <option value='Lucida Console'>Lucida Console</option> 
    <option value='Courier New'>Courier New</option> 
    <option value='Consolas'>Consolas</option> 
</select> 

Mit jquery wie folgt:

$(document).ready(
function() 
{ 
    $('font-select').on('change', 
     function() 
     { 
      $('output').css('font-family', $('#font-select').val()); 
      console.log('Font changed'); 
     }); 
}); 

weiß, dass ich die auf Wechsel jedes Mal Ereignis ausgelöst wird ich eine andere Schriftart auswählen, aber die Schriftart in der div nur ändert sich das erste Mal, wenn ich eins auswähle. Danach bekomme ich noch eine 'font changed' Notiz in der Konsole, aber keine Änderung im # output div.

Ich habe versucht, es an sich verändernde

$(document).on('change', '#font-select', 
    .... 

Ich habe auch versucht, die ids Klassen zu ändern und über Klasse Auswahl

$('.font-select').change(
    .... 

mit den gleichen Ergebnissen. Hat jemand einen Rat?

Answer 1

Das Problem betrifft die von Ihnen verwendeten Selektoren. Wenn Sie versuchen, auf ein Element über die ID zuzugreifen, sollten Sie # vor dem Element einfügen.

ist hier [Fiedler] [1], das funktioniert gut und lösen Ihr Problem

Hoffe, es hilft.

[1]: https://jsfiddle.net/rajsnd08/nfh5craz/ 

Answer 2

zuerst würde ich immer die richtigen Selektoren in jquery in Ihrem Fall Gebrauch verwenden:

$('#font-select').on('change', function() { 
    $('#output').css[....] 
} 

Die '#' wählt von id.

Zweiter Tipp:

Versuchen Sie, die font-family Klasse zuerst zu entfernen und legen Sie dann eine neue, manchmal jQuery/html verwirrt erhält, wenn Sie Werte auf bereits vorhandenen Eigenschaften (oder zumindest habe ich das Gefühl, es tut : D) so etwas in Ihrer Funktion "ändern" So versucht:

$('#output').css('font-family', ''); //this is basically standard but i dont like it... 
$('#output').css('font-family', $('#font-select').val()); 

Answer 3

Sie nicht richtig, die IDs in Ihrer jQuery (# fehlenden angegeben haben).

$(document).ready(function() { 
 
    $('body').on('change', '#font-select', function() { 
 
    $('#output').css('font-family', $('#font-select').val()); 
 
    console.log('Font changed'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='output'> 
 
    The quick brown fox jumps over the lazy dog 
 
</div> 
 
<select id='font-select'> 
 
    <option value='Lucida Console'>Lucida Console</option> 
 
    <option value='Courier New'>Courier New</option> 
 
    <option value='Consolas'>Consolas</option> 
 
</select>