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的新手，每次选择the_optionvalue_id时我都不知道如何设置ID（background_image_url）和option。有什么帮助吗？

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代码放在ready函数中：

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

Answer 2

似乎您不需要添加click事件，因为每次值更改时您都已调用名为bg的函数。你可以在某处声明你的功能：

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

Answer 3

的 jsFiddle Demo 的

基本上你应该保留一个字符串，其中包含文件所在目录的值，然后使用jquery的change方法在select更改时更改css的值。下面是一个使用div来显示值输出的简单示例：

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 4

所以，你可以让函数返回一个函数。外部函数可以使用参数，因此您可以：

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

函数的jQuery参数

4 个答案: