如何在 jquery hover() 上调用函数

Question

我正在尝试将函数调用到jquery hover()中。
首先，我创建函数objIn()从hover()传递值，它可以工作。
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{
	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>

Answer 1

您在另一个函数中编写了函数testObj，因此无法从外部访问。还要将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');
    }
  }