jQuery parameter for a function

Question

This is the code I am using now:

$(document).ready(function(){
 $('#btn2').click(function(){
 $('iframe').contents().find('body').css('background-image', 'url(http://mk7vrlist.altervista.org/backgrounds/1.png)');
 $('iframe').contents().find('body').css('opacity', 1.0);
 });
});

And here's the HTML:

<select onchange="bg(this[this.selectedIndex].value);">
 <option value="0.png" id="btn1">1. Default skin</option>
 <option value="1.png" id="btn2">2. MK7 Collage</option>
 <option value="1.png" id="btn3">3. Solid Queen</option>
</select>

When I click the 2. MK7 Collage, as you can see in my jQuery function, the background of my iframe changes.

I have 3 option values and each one has a different background and id. I'd like to change them everytime a 'option value' is clicked. It's like:

 $('#the_optionvalue_id').click(function(background_image_url){
 $('iframe').contents().find('body').css('background-image', 'url(background_image_url)');
 $('iframe').contents().find('body').css('opacity', 1.0);
 });

I am pretty new with jQuery and I don't know how to set the id (the_optionvalue_id) and the background_image_url every time that a option is selected. Any help?

• Karoly Horvath: "I don't know how to set the id (the_optionvalue_id) and the background_image_url with HTML." - ok, slow down, I don't understand a word. what exactly do you want to do?
• Alberto Rossi: '$('#the_optionvalue_id').click(function(background_image_url){' Here I wanna change the value of 'the_optionvalue_id' and and the 'background_image_url' every time I click an 'option'

Answer 1

Try :

<select id="bgselector">
 <option value="0.png" id="btn1">1. Default skin</option>
 <option value="1.png" id="btn2">2. MK7 Collage</option>
 <option value="1.png" id="btn3">3. Solid Queen</option>
</select>

then put all your jQuery code inside the ready function :

<script>
$(function() {
 var iframe_body = $('iframe').contents().find('body'); //cache this for performance;
 var set_bg = function(url) {
 iframe_body.css({
 'background-image': 'url(' + url + ')',
 'opacity': 1.0);
 });
 }
 $('#bgselector').change(function() {
 set_bg($(this).val());
 });
 $('#btn2').click(function(){
 set_bg('http://mk7vrlist.altervista.org/backgrounds/1.png');
 });
});
</script>

• Alberto Rossi: This code works perfectly, I'm going to accept the answer. Thank you!
• Jeff: Does JQuery not cache selections automatically? I've worked more with YUI, which if I recall does, but I'm not sure about JQuery
• OneOfOne: As far as I can it doesn't cache, you can chain but that wouldn't work for this case.

Answer 2

jsFiddle Demo

Basically you should keep a string with the value of the directory where the files sit, and then using the change method of jquery change the value of the css when the select changes. Here is a simple example using a div to show the output of the value:

html

<div id="body">http://mk7vrlist.altervista.org/backgrounds/0.png</div>
<select id="sel">
 <option value="0.png" id="btn1">1. Default skin</option>
 <option value="1.png" id="btn2">2. MK7 Collage</option>
 <option value="2.png" id="btn3">3. Solid Queen</option>
</select>

js

var base = "http://mk7vrlist.altervista.org/backgrounds/";
$("#sel").change(function(){
 $("#body").html(base + this.value); 
});

Answer 3

So, you can have a function return a function. The outer function can take a parameter, so then you would have:

$(document).ready(function(){
 var clickHandlerGenerator = function(url) {
 return function(){
 $('iframe').contents().find('body').css('background-image', 'url(' + url + ')');
 $('iframe').contents().find('body').css('opacity', 1.0);
 });
 $('#btn2').click(clickHandlerGenerator('http://mk7vrlist.altervista.org/backgrounds/1.png'));
 $('#btn1').click(clickHandlerGenerator('http://mk7vrlist.altervista.org/backgrounds/WHATEVER.png'));
}

Answer 4

It seems that you don't need to add a click event since you already call a function named bg each time the value changes. You may just declare your function somewhere :

function bg(value) {
 var base = 'http://mk7vrlist.altervista.org/backgrounds/';
 $('iframe').contents().find('body').css({
 'background-image': 'url(' + (base + value) + ')',
 'opacity': 1
 });
}