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?

"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? — Karoly Horvath
– Karoly Horvath, Commented Sep 3, 2013 at 21:05
'$('#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' — Alberto Rossi
– Alberto Rossi, Commented Sep 3, 2013 at 21:09

OneOfOne · Accepted Answer · 2013-09-03 21:16:49Z

2

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>

edited Sep 3, 2013 at 21:16

answered Sep 3, 2013 at 21:09

OneOfOne

100k22 gold badges195 silver badges187 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alberto Rossi Over a year ago

This code works perfectly, I'm going to accept the answer. Thank you!

Jeff Over a year ago

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 Over a year ago

As far as I can it doesn't cache, you can chain but that wouldn't work for this case.

Travis J · Accepted Answer · 2013-09-03 21:11:31Z

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); 
});

answered Sep 3, 2013 at 21:11

Travis J

82.6k43 gold badges213 silver badges280 bronze badges

Comments

Jeff · Accepted Answer · 2013-09-03 21:21:07Z

2

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'));
}

answered Sep 3, 2013 at 21:21

Jeff

12.9k5 gold badges36 silver badges63 bronze badges

Comments

score 2 · Accepted Answer · 2013-09-03 21:34:28Z

2

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
    });
}

edited Sep 3, 2013 at 21:34

answered Sep 3, 2013 at 21:11

user1636522

Collectives™ on Stack Overflow

jQuery parameter for a function

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related