Bild im Dropdown-Menü javascript/jquery ändern, in der Geige arbeiten, aber nicht woanders?

Das Leben von mir kann dies nicht zum Funktionieren bringen. Ich versuche, ein anderes Bild anzuzeigen, wenn man das Dropdown-Menü ändert. Es ändert sich nie, das ist das Problem.Bild im Dropdown-Menü javascript/jquery ändern, in der Geige arbeiten, aber nicht woanders?

Ich denke ich muss etwas mit Docready machen, aber nicht sicher was!

<html> 
<head> 
    <script src="/js/jquery-1.11.2.js"></script> 
    <script type="text/javascript"> 
    var pictureList = [ 
     "http://lorempixel.com/400/200/sports/1", 
     "http://lorempixel.com/400/200/sports/2", 
     "http://lorempixel.com/400/200/sports/3", 
     "http://lorempixel.com/400/200/sports/4", 
     "http://lorempixel.com/400/200/sports/5", ]; 

    $(document).ready(function() { 
    $('#picDD').change(function() { 
     var val = parseInt($('#picDD').val()); 
     $('img').attr("src",pictureList[val]); 
    }); 
}); 

    </script> 
</head> 
<body> 
    <img src="http://lorempixel.com/400/200/sports/1" /> 
    <select id="picDD"> 
     <option value="1" selected>Picute 1</option> 
     <option value="2">Picute 2</option> 
     <option value="3">Picute 3</option> 
     <option value="4">Picute 4</option> 
     <option value="5">Picute 5</option> 
    </select> 
</body> 
</html>

Versucht dies.

$(document).ready(function() { 
    var pictureList = [ 
     "http://lorempixel.com/400/200/sports/1", 
     "http://lorempixel.com/400/200/sports/2", 
     "http://lorempixel.com/400/200/sports/3", 
     "http://lorempixel.com/400/200/sports/4", 
     "http://lorempixel.com/400/200/sports/5", ]; 


    $('#picDD').change(function() { 
     var val = parseInt($('#picDD').val()); 
     $('img').attr("src",pictureList[val]); 
    }); 
}); 

    </script> 
</head> 
<body> 
    <img src="http://lorempixel.com/400/200/sports/1" /> 
    <select id="picDD"> 
     <option value="1" selected>Picute 1</option> 
     <option value="2">Picute 2</option> 
     <option value="3">Picute 3</option> 
     <option value="4">Picute 4</option> 
     <option value="5">Picute 5</option> 
    </select> 
</body> 
</html>

Quelle

2016-05-03 ohdust

Irgendwelche Glück mit dem Code in meiner Antwort? –

Der Grund Ihr Code in jsFiddle Arbeit ist, dass jsFiddle einen impliziten onLoad Wrapper zu Ihrem JavaScript erstellt.

Ohne diesen Wrapper, bist du in Schwierigkeiten. Um dies zu beheben, verschieben Sie Ihr pictureList Array in $(document).ready(function() {}.

In der JsFiddle-Demo sehe ich auch eine Warnung mit gemischten Inhalten, da die angeforderten Bilder von einem unsicheren Server stammen, obwohl die Webseite selbst sicher ist (https). Wenn Sie das Array pictureList so ändern, dass es sichere Bilder enthält, verbessert sich die Geschwindigkeit dramatisch. Versuchen Sie zum Beispiel, dies für Ihr pictureList Array zu verwenden.

var pictureList = [ 
    "https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg", 
    "https://www.petfinder.com/wp-content/uploads/2012/11/140272627-grooming-needs-senior-cat-632x475.jpg", 
    "https://upload.wikimedia.org/wikipedia/commons/4/4d/Cat_March_2010-1.jpg", 
    "https://upload.wikimedia.org/wikipedia/commons/1/1e/Large_Siamese_cat_tosses_a_mouse.jpg", 
    "https://www.petfinder.com/wp-content/uploads/2013/09/cat-black-superstitious-fcs-cat-myths-162286659.jpg" 
    ];

Quelle

2016-05-03 21:48:44

Ich habe aktualisiert, was ich habe und immer noch nicht funktioniert. Ich habe die Bildliste in das Dokument eingefügt. – ohdust

Ich werde es jetzt testen. –

Vielen Dank. :) – ohdust

Bild im Dropdown-Menü javascript/jquery ändern, in der Geige arbeiten, aber nicht woanders?

Antwort

Verwandte Themen