jquery hover()에서 함수를 호출하는 방법

Question

jquery hover()에 함수를 호출하려고합니다.
먼저 hover()에서 값을 전달하는 함수 objIn()을 만들고 작동합니다.
mousenter을 객체로 만든 후 두 번째 함수를 실행하기위한 플래그를 만들지 만 함수에 매개 변수를 전달할 때 문제가 발생합니다. testObj().

jquery에서 값을 전달할 수있는 방법은 hover()입니다.

var objHover = $('.main ul li a, .content-wrap .content'); 
 

 
var flag = 'true'; 
 
var mainAnchor; 
 

 
function objIn(mainAnchor) { 
 
    var mainData = $('.main li a[data-hover= ' + mainAnchor + ']'); 
 
    var contentData = $('.content-wrap .content[data-hover= ' + mainAnchor + ']'); 
 

 
    function testObj(dataItem) { 
 
    if (dataItem == 'true') { 
 
     contentData.addClass('active'); 
 
     contentData.siblings().addClass('hidden'); 
 
     mainData.addClass('active'); 
 
     $(this).addClass('active'); 
 
    } else if (dataItem == 'false') { 
 
     mainData.removeClass('active'); 
 
     contentData.removeClass('active'); 
 
     contentData.siblings().removeClass('hidden'); 
 
     $(this).removeClass('active'); 
 
    } 
 
    } 
 
} 
 

 
objHover.hover(
 
    function() { 
 
    flag = 'true'; 
 
    mainAnchor = $(this).data('hover'); 
 
    objIn(mainAnchor); 
 
    testObj(flag); 
 
    }, 
 
    function() { 
 
    flag = 'false'; 
 
    mainAnchor = $(this).data('hover'); 
 
    objIn(mainAnchor); 
 
    testObj(flag); 
 
    });

.content-wrap{ 
 
    margin-top: 30px; 
 
    padding-bottom: 60px; 
 
    background-color: yellow; 
 
    clear: both; 
 
    overflow: hidden; 
 
} 
 

 
.content{ 
 
    padding: 80px; 
 
    float: left; 
 
    margin-right: 10px; 
 
    cursor: pointer; 
 
} 
 

 
.main li a.active, 
 
.content.active{ 
 
    border: 2px solid red; 
 
} 
 

 
.hidden{ 
 
    opacity: 0.7; 
 
} 
 
.content.hidden{ 
 
\t background-color: gray; 
 
} 
 

 
.red { 
 
    background-color: red; 
 
} 
 
.green { 
 
    background-color: green; 
 
} 
 
.blue { 
 
    background-color: blue; 
 
} 
 
.purple { 
 
    background-color: purple; 
 
} 
 
.brown { 
 
    background-color: brown; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="main"> 
 
    <ul> 
 
    <li><a href="" data-hover="item1">item 1</a></li> 
 
    <li><a href="" data-hover="item2">item 2</a></li> 
 
    <li><a href="" data-hover="item3">item 3</a></li> 
 
    <li><a href="" data-hover="item4">item 4</a></li> 
 
    <li><a href="" data-hover="item5">item 5</a></li> 
 
    </ul> 
 
</div> 
 

 
<div class="content-wrap"> 
 
    <div class="content red" data-hover="item1">content 1</div> 
 
    <div class="content green" data-hover="item2">content 2</div> 
 
    <div class="content blue" data-hover="item3">content 3</div> 
 
    <div class="content purple" data-hover="item4">content 4</div> 
 
    <div class="content brown" data-hover="item5">content 5</div> 
 
</div>

당신은 외부에서 이에 도달 할 수없는 또 다른 함수 내에서 함수를 testObj 쓴

Answer 1

. 또한 mainData 및 contentData을 전역으로 정의하여 testObj 기능을 사용할 수있게하십시오.

var mainData; 
var contentData; 
function objIn(mainAnchor) { 
    mainData = $('.main li a[data-hover= ' + mainAnchor + ']'); 
    contentData = $('.content-wrap .content[data-hover= ' + mainAnchor + ']'); 
} 

function testObj(dataItem) { 
    if (dataItem == 'true') { 
     contentData.addClass('active'); 
     contentData.siblings().addClass('hidden'); 
     mainData.addClass('active'); 
     $(this).addClass('active'); 
    } else if (dataItem == 'false') { 
     mainData.removeClass('active'); 
     contentData.removeClass('active'); 
     contentData.siblings().removeClass('hidden'); 
     $(this).removeClass('active'); 
    } 
    }