LI 발생의 현재 색인

시나리오는 아래에 설명되어 있습니다.LI 발생의 현재 색인

<li onmouseover="swapArrow_white()" onmouseout="swapArrow_black()"><a href="#">Menu<img src="common/images/downArrow.png" class="downarrow" /></a> 
<li onmouseover="swapArrow_white()" onmouseout="swapArrow_black()"><a href="#">Menu<img src="common/images/downArrow.png" class="downarrow" /></a> 
<li onmouseover="swapArrow_white()" onmouseout="swapArrow_black()"><a href="#">Menu<img src="common/images/downArrow.png" class="downarrow" /></a>

li의 mouseover 이벤트에서 아래쪽 화살표 이미지를 변경해야합니다. 다음 스크립트를 사용하고 있습니다.

function swapArrow_white(){ 
      $("img.downarrow").attr("src","common/images/downArrowWhite.png"); 
     } 

     function swapArrow_black(){ 
      $("img.downarrow").attr("src","common/images/downArrow.png"); 
     }

그러나 mouseover 이벤트가 발생하면 모든 드롭 다운 이미지가 변경됩니다. mouseover 이벤트가 발생한 현재 LI를 선택하지 않습니다.

하나의 이미지 만이

이 문제 제발 도와주세요 한 번에 변경할 수 있도록 현재의 LI를 얻을 수있는 방법이있다?

출처

2010-07-23 Lokesh Yadav

그래서 jQuery를에 바인딩 이벤트를보십시오 :

HTML :

<li class="changeColor"><a href="#">Menu<img src="common/images/downArrow.png" class="downarrow" /></a> 
<li class="changeColor"><a href="#">Menu<img src="common/images/downArrow.png" class="downarrow" /></a> 
<li class="changeColor"><a href="#">Menu<img src="common/images/downArrow.png" class="downarrow" /></a>

jQuery를 :

$('li.changeColor').mouseover(function(){$("img", this).attr("src","common/images/downArrowWhite.png");}) 
$('li.changeColor').mouseout(function(){$("img", this).attr("src","common/images/downArrow.png");})

출처

2010-07-23 18:13:37 Adam

빠른 응답을 주셔서 감사합니다. 그러나 src는 LI의 속성이 아닙니다. 우리는 img 요소를 얻을 필요가있다. –

그래서 $ ("img", this) 또는 $ ("img", this) – fantactuka

@fantactuka로 바꾸십시오. 나는 그 변화를 만들었다. – Adam

난 아담의 솔루션에 동의하지만이를 위해 CSS를 사용하는 것이 좋을 것이다 :

.changeColor a { 
    background: url('common/images/downArrow.png') 
} 

.changeColor a:hover { 
    background: url('common/images/downArrowWhite.png') 
}

li (예 : li)의 모든 영역을 포함하도록 요소를 a 스타일로 지정할 수 있다고 확신합니다. 블록)

JS 용액 : 디스플레이

$('li.changeColor').hover(function() { 
    $("img", this).attr("src","common/images/downArrowWhite.png");} 
}, function() { 
    $("img", this).attr("src","common/images/downArrow.png");} 
})

출처

2010-07-23 18:29:12 fantactuka

LI에 첨부 된 배경 그라디언트 이미지가 이미 있습니다. 따라서 화살표 이미지를 배경 이미지로 사용할 수 없습니다. 다른 아이디어를 제안하십시오. –

span''처럼 또 하나 개의 요소를 추가하고 .changeColor에게 기간 사용 '(URL : { 배경 : 홈페이지 ('일반/이미지/downArrow.png ') } .changeColor A : 호버 스팬 { 배경 일반/이미지/downArrowWhite.png ') } 이 이미지 요소 – fantactuka

하드 행운 :)의 변화 SRC 후 훨씬 낫다는 는 은 여전히 코드를 넣어주세요 2시 @ 미드 나잇 필요한 결과를 얻을하지 않았다 여기 .. 아무도 도와주세요 .. 내일 프로젝트 공개가 있습니다 .. –

각 이미지 그것을 자신의 마우스 오버 동작을 각각 할당하는 기능을 이용하여 결합보십시오.

$('li a').each(function(){ 
    img = $(this).child('img'); 
    $(this).hover(function(){ 
     img.addClass('arrowDown'); 
    },function(){ 
     img.removeClass('arrowDown'); 
    }); 
});

화살표가 JS 이벤트를 트리거하지 않는 한 CSS는 여전히 여기에 있습니다.

출처

2011-01-18 12:43:35

LI 발생의 현재 색인

답변

관련 문제