javascript - 函数的 jQuery 参数

Question

这是我现在使用的代码:

$(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);

 });
});

这是 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>

当我点击2. MK7 Collage，正如您在我的 jQuery 函数中看到的，我的 iframe 的背景发生了变化。

我有 3 个选项值，每个选项值都有不同的背景和 ID。我想在每次单击“选项值”时更改它们。就像:

 $('#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);

     });

我对 jQuery 很陌生，我不知道如何在每次 option 时设置 id (the_optionvalue_id) 和 background_image_url 被选择。有什么帮助吗？

Answer 1

尝试:

<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>

然后将所有 jQuery 代码放入就绪函数中:

<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>