Question

我有以下功能控制四个图像的不透明度属性，包括自行车，汽车，公共汽车和步行。这是我每次单击图像时编写的用于更改不透明度的代码。

function changebike() {
    $('#bike').css('opacity','1.0');
    $('#car').css('opacity','0.5');
    $('#bus').css('opacity','0.5');
    $('#walk').css('opacity','0.5');
};

function changecar() {
    $('#bike').css('opacity','0.5');
    $('#car').css('opacity','1.0');
    $('#bus').css('opacity','0.5');
    $('#walk').css('opacity','0.5');
};

function changebus() {
    $('#bike').css('opacity','0.5');
    $('#car').css('opacity','0.5');
    $('#bus').css('opacity','1.0');
    $('#walk').css('opacity','0.5');
};

function changewalk() {
    $('#bike').css('opacity','0.5');
    $('#car').css('opacity','0.5');
    $('#bus').css('opacity','0.5');
    $('#walk').css('opacity','1.0');
};

我需要写一个像这样的函数

function changeItem(item) {
    var elements = $('*').filter(function() {
                        var options=['0.5','1.0'];
                        return $.inArray($(this).css('opacity'), options) > -1;
                    });
    elements.css('opacity','0.5');
    $(item).css('opacity','1.0');
};

在HTML中，我像这样调用函数

<img src="bike.png" id="bike" onclick="changeItem('#bike')" />

但是，上面的代码不起作用。请指出我的错误并更正代码。 :-)谢谢

Answer 1

有点像，但你必须定义你的ID

function changeItem(item) {
    var elementIDs = ["#bike", "#car", "#bus", "#walk"];
    $.each(elementIDs, function(k, v){
        var op = 0.5;
        if( item == v )
            op = 1;
        $(v).css('opacity', op)
    });
};

Answer 2

使用jQuery时，你不必通过丑陋的“onclick”事件调用该函数。我还没有测试过这段代码......我的脑子里有它...希望它有效：）

HTML

<div id="bike">bike</div>
<div id="car">car</div>
<div id="bus">bus</div>
<div id="walk">walk</div>

JS

$(document).ready(function(){

    $('#bike').click(changeOpacity(this));
    $('#car').click(changeOpacity(this));
    $('#bus').click(changeOpacity(this));
    $('#walk').click(changeOpacity(this));

    function changeOpacity(target){
        var ids = ['#bike','#car','#bus','#walk'];
        for(var id in ids){
            $(id).css('opacity',.5);
            if(ids[id] == target.attr('id')){
                $(id).css('opacity',1);
            }
        }    
    }

});

用于查找具有不透明度属性的元素的jQuery语法

2 个答案: