jquery의 각 li에 마우스 오버 이벤트를 추가하는 방법은 무엇입니까?

jquery선택기를 통해 태그 모음을 선택할 수 있습니다. 그런 다음 $(this)를 통해 현재 개체를 가리킵니다.
$("#ul li") 이는 id 아래의 모든 li을 가져올 수 있습니다. 마우스가 특정 li 위로 지나갈 때 $(this)는 현재 li 개체가 작동 중임을 나타내는 데 사용됩니다.
각 리에 마우스 오버를 추가하는 것은 각 리에 대해 마우스 오버 이벤트를 트리거하는 것으로 이해될 수 있습니다. 예:

<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script type="text/javascript">
$("#ul li").mouseover(function(){//jquery的mouseover事件
alert($(this).index());//弹出每个li的的位置
//这样就能实现每个li都绑定mouseover事件
});
</script>

간단한 미닫이문 효과여야 합니다.

HTML의 구조는 아마도 왼쪽에 목록이 있고 오른쪽에 div 그룹이 있는 구조와 비슷할 것입니다.

사실 왼쪽 목록과 오른쪽 div 그룹 모두 인덱스 값이 있다는 것만 이해하시면 됩니다. 그런 다음 변수를 통해 제어하면 이 변수가 왼쪽 목록과 오른쪽 버튼에 사용될 수 있습니다.

var int = 0; //初始化一个变量
  
//定义一个函数，用来隐藏显示右侧的div和控制左侧的列表
function divShow(int){
    $('#right .item').hide().eq(int).show();
    $('#left li').removeClass('current').eq(int).addClass('current');
}

왼쪽 목록에 이벤트를 추가해야 합니다.

$('#left li').bind({
    'mouseover' : function(){
        //获取当前元素的索引值
        int = $(this).index();
          
        //执行函数,这里会显示右侧的第一个div元素
        divShow(int);
    },
    'mouseout' : function(){
        //鼠标划开时的操作
        //int = 0;
        //divShow(int);
    }
});

옆쪽에 있는 버튼도 마찬가지입니다.

//上翻
$('#prev').bind({
    'click' : function(){
        //这里要使用判断
        if(int <= 0){
            //这里的个数可以拿到外面定义；
            int = ($(&#39;#right .item&#39;).length-1);
        }else{
            int = (int-1);
        };
        int = int;
    }
});
  
//下翻
$(&#39;#next&#39;).bind({
    &#39;click&#39; : function(){
        //这里要使用判断
        if(int >= ($(&#39;#right .item&#39;).length-1)){
            //这里的个数可以拿到外面定义；
            int = 0;
        }else{
            int = (int+1);
        };
        int = int;
    }
});

마우스가 떠날 때 초기화하려는 경우에는 이 int만 설정하면 됩니다. 각 버튼의 mouseout 이벤트 index 변수는 0입니다.

위 내용은 jquery의 각 li에 마우스 오버 이벤트를 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!