동적으로 생성 된 클래스의 호버 동작 변경

debugcn 에 게시 Dev

9 듀스

내 목표는 항목의 썸네일이 표시되는 타일 디자인으로 전자 상거래 상점을 디자인하는 것입니다. 그런 다음 마우스를 가져 가면 항목 이름이 그 위에 표시됩니다. 마찬가지로 이 , 그 위로 슬라이드 것을 제외하고 hover대신 단순히 나타나는의.

주요 문제는 모든 HTML이 자동 생성되고 모든 항목에 CSS ID가없는 CSS 클래스가있는 항목 표시를 위해 미리 패키지화 된 템플릿이있는 전자 상거래 상점 솔루션을 사용하고 있다는 것입니다.

불필요한 코드가 편집 된 HTML은 다음과 같습니다.

<td class="hoverClass">
    <--Edited out code-->
        <table class="otherClass" cellspacing="0" cellpadding="0" width="100%" style="height: 158px; width: 190px;">
          <edited out>
        </table>
        <table class="appearClass" cellspacing="0" cellpadding="0" width="100%" style="margin-bottom: 0px;">
          <edited out>
        </table>
</td>

내 목표는의 호버이다 .hoverClass하고 .appearClass그 위에 나타납니다. .otherClass내 연구에서 부모와 자식 Div가 아닌 토글을 슬라이드 할 수있는 동일한 수준에서 2div가되는 경향이 있었기 때문에 포함 했습니다. 내 계획은 Jquery를 사용하는 slideToggle것이었기 때문에 클래스에 ID를 동적으로 추가하려고했습니다.

<script>
var x = document.getElementsByClassName("hoverClass");
var y = document.getElementsByClassName("appearClass");
var thumbArray = [];
var footArray = [];
for(var i = 0; i < x.length; i++)
{
    thumbArray.push("catThumb" + i);
    footArray.push("catFoot" + i);
    x[i].id = thumbArray[i];
    y[i].id = footArray[i];
}
for(var j = 0; j < x.length; j++)
{
    $("#" + thumbArray[j]).hover(function(){
        $("#" + footArray[j]).slideToggle();
    });
}
</script>

발생하는 것은 모든 요소에 ID가 생성되었지만 모든 사용자 지정 호버 ID에는 마지막 appearClass요소에 호버가 결합되어 있습니다. 즉, 10 개의 항목이 있고이 코드를 실행하면 항목 1에서 10까지 마우스를 가져 가면 항목 10에만 슬라이드가 표시됩니다.

표시 ID의 인스턴스와 결합 할 호버 ID를 얻으려면 어떻게해야합니까?

Balachandran

항목을 가리키면 footArray [j] 값을 얻을 수 없습니다. 출력을 원하면 다음을 사용하십시오.

for(var j = 0; j < x.length; j++)
{
    $("#" + thumbArray[j]).hover(function(){
        $("#"+this.id.replace("catThumb","catFoot")).slideToggle();
    });
}

그것들이 동적 클래스라면 다음과 같이 사용할 수 있습니다.

$(document).on("mouseenter mouseleave","[class^=catThumb]",function(){

  $("[class^=catFoot]").eq($(this).index()).slideToggle();

});

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-3

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사