函数的jQuery参数

jQuery parameter for a function

本文关键字：参数 jQuery 函数      更新时间：2023-09-26

这是我现在使用的代码：

$(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。有什么帮助吗？

尝试：

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

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

因此，您可以让一个函数返回一个函数。外部函数可以取一个参数，所以你会得到：

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

似乎不需要添加点击事件，因为每次值更改时都会调用一个名为bg的函数。你可以在某个地方声明你的函数：

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