用於查找具有不透明屬性的元素的jQuery語法

Question

我有以下功能，它可以通過id，即自行車，汽車，公共汽車和步行控制四個圖像的不透明屬性。這是我每次單擊圖像時寫入的用於更改不透明度的代碼。

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

});