2

这是我现在使用的代码：

$(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 很陌生，我不知道如何设置 id ( the_optionvalue_id) 以及background_image_url每次option选择 a 。有什么帮助吗？

4

4 回答 4

2

所以，你可以让一个函数返回一个函数。外部函数可以带一个参数，因此您将拥有：

$(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'));
}
于 2013-09-03T21:21:07.543 回答
2

尝试 ：

<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>
于 2013-09-03T21:09:59.100 回答
2

似乎您不需要添加单击事件，因为您已经在bg每次值更改时调用了一个名为的函数。您可以在某处声明您的函数：

function bg(value) {
    var base = 'http://mk7vrlist.altervista.org/backgrounds/';
    $('iframe').contents().find('body').css({
        'background-image': 'url(' + (base + value) + ')',
        'opacity': 1
    });
}
于 2013-09-03T21:11:27.067 回答
2

jsFiddle Demo

基本上你应该保留一个包含文件所在目录的值的字符串，然后change在选择更改时使用jquery的方法更改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); 
});
于 2013-09-03T21:11:31.697 回答