afbeelding wijzigen met jQuery
Ik heb een drop down menu in jquery, en ik wil dat als je 1 kiest, de waarde van de img src veranderd. Ik krijg dit alleen niet voor elkaar en weet niet welke stap ik nu moet maken. Kan iemand me op weg helpen?
Groeten Donny
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<select id="image"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select>
<img src="">
<script>
(function(){
var img = $('img');
$('select', '#image').on('click', function() {
var $this = $(this)
$(this)
.siblings('select', '#image')
console.log();
});
console.log(this);
})();
</script>
<img src="">
<script>
(function(){
var img = $('img');
$('select', '#image').on('click', function() {
var $this = $(this)
$(this)
.siblings('select', '#image')
console.log();
});
console.log(this);
})();
</script>
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<select id="image"><option value="1.png">1</option><option value="2.png">2</option><option value="3.png">3</option></select>
<img src="">
<script>
$(function(){
$("#image").change(function(e) {
$("img").attr('src', $(this).val());
});
});
</script>
<img src="">
<script>
$(function(){
$("#image").change(function(e) {
$("img").attr('src', $(this).val());
});
});
</script>
Edit:
Even een linkje: http://jsfiddle.net/PHMqH/
Gewijzigd op 13/01/2013 16:34:50 door Nick Dijkstra
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<script>
$(function(){
$("#image").change(function(e) {
$("img").attr('src', $(this).val() + '.png');
var $this = $(this),
stylesheet = $this.data('#image')
$("link").attr('href', stylesheet + '.css');
});
});
</script>
$(function(){
$("#image").change(function(e) {
$("img").attr('src', $(this).val() + '.png');
var $this = $(this),
stylesheet = $this.data('#image')
$("link").attr('href', stylesheet + '.css');
});
});
</script>
Edit:
Het is gelukt. Laatste vraag:
Ik wil nu de H1 id=header text wijzigen. Alleen wil ik dit niet wijzigen naar hetgene waarbij de value staat, maar hetgene <option>Hiertussen</option> of hetgeen in de title=tekst. Of eventueel iets anders dat in de <option> geplaatst kan worden, maa rniet zichtbaar is voor een ander.
D.m.v. PHP wordt het drop down menu opgehaald, ik doe het nu enkelt in HTML om het uit te proberen :)
Gewijzigd op 14/01/2013 02:54:31 door Donny Wie weet
Code (php)
1
$('#header').html($(this).find(':selected').html());
Code (php)
1
$('#header').html($(this).find(':selected').attr("title"));
Ik heb 2x <link rel=stylesheet> 1 met de naam style en 1 met de naam template. Nu wil ik onClick, de link wijzigen. De href. Dit lukt wel, maar hij wordt gewijzigd bij bijde links, en wil alleen laten wijzigen bij de id=stylesheet. Ik heb geprobeerd:
$("link", "#stylesheet").attr('href', $(this).val() + '.css');
Dit werkte niet. jQ denkt toch als: selecteer de LINK met het ID/CLASS van 'waarde'. Van deze LINK geven we de ATTR(attribute) HREF de waarde $(this) (waarop geklikt is)
Of denk ik nu verkeerd?
<link rel="stylesheet" id="my_stylesheet">
$("#my_stylesheet").attr('href', $(this).val() + '.css');
Laatste en een heel vaag probleem:
Als ik een selectie maak, dan wordt de link geupdate, maar mijn CSS file blijft standaard... De href veranderd naar de goede waarde, maar wordt niet ingevoerd... Enig idee? Mijn code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<script>
$(function(){
$("#image").change(function(e) {
$("img").attr('src', 'imgs/' + $(this).val() + '.png');
$("#stylesheet").attr('href', 'css/template_' + $(this).val() + '.css');
$("#template").attr('href', 'css/template_' + $(this).val() + '.css');
$('#header1').html($(this).find(':selected').html());
});
});
</script>
$(function(){
$("#image").change(function(e) {
$("img").attr('src', 'imgs/' + $(this).val() + '.png');
$("#stylesheet").attr('href', 'css/template_' + $(this).val() + '.css');
$("#template").attr('href', 'css/template_' + $(this).val() + '.css');
$('#header1').html($(this).find(':selected').html());
});
});
</script>
Kijk, probeer dit eens:
black.css
Code (php)
1
2
3
4
2
3
4
* {
color: #666666;
background-color: #000000;
}
color: #666666;
background-color: #000000;
}
white.css
Code (php)
1
2
3
4
2
3
4
* {
color: #999999;
background-color: #ffffff;
}
color: #999999;
background-color: #ffffff;
}
index.php
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<link rel="stylesheet" id="stylesheet" href="white.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(function() {
$('p').on('click', function(e) {
var color = $(this).html();
$("#stylesheet").attr('href', color);
})
});
</script>
<p>black.css</p>
<p>white.css</p>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(function() {
$('p').on('click', function(e) {
var color = $(this).html();
$("#stylesheet").attr('href', color);
})
});
</script>
<p>black.css</p>
<p>white.css</p>
Bij mij werkt het.