2011-11-23 5 views
0

저는 자전거, 자동차, 버스 및 도보 등의 ID를 사용하여 4 개의 이미지의 불투명도 속성을 제어하는 ​​다음과 같은 기능을 제공합니다. 이것은 이미지를 클릭 할 때마다 불투명도를 변경하기 위해 작성한 코드입니다.불투명도 속성이있는 요소를 찾으려면 jQuery 구문을 사용하십시오.

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

가 나는 그러나이

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

같은 함수를 호출하는 기능 HTML에서이

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

처럼 작성해야, 위의 코드가 작동하지 않습니다. 실수를 지적하고 코드를 수정하십시오. 감사합니다

답변

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

뛰어난! 고마워요 .. 완벽하게 일했습니다. 한 가지 질문입니다. k가 사용되지 않을 때 왜 함수에서 (k, v)를 전달해야합니까? – thandasoru

+0

2 개의 매개 변수를 얻으므로 첫 번째 매개 변수 만 정의하면 매개 변수는 값이 아니라 인덱스가되며 원하는 값이됩니다. 값을주는'v' 대신에'elementIDs [k]'를하고 싶지 않다면 말입니다. – Niels

+0

아, 알았어. 설명 주셔서 감사합니다! – thandasoru

1

는 jQuery를 사용하는 경우 추악한 "온 클릭"이벤트를 통해 함수를 호출해야 정의해야합니다. 난 내 머리에서 ... 권리를이 코드를 테스트하지 않았습니다 ... 희망 작동 :)

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

}); 
+0

오 ... 너무 오래 걸렸습니다. ( – badfur

+0

괜찮습니다. 모바일 브라우저 용 ontouchstart 이벤트를 사용하고 있습니다. :-)하지만 이것은 갈 길과 같습니다. – thandasoru

관련 문제