CODEWITHSUNDEEP
jqueryhover
rnDesto
rnDesto

Reputation: 259

how to call function on jquery hover()

I am trying to call function into jquery hover().
First I'm creating function objIn() to pass value from hover() and it works.
After mousenter to object, I create flag to run second function, but I have problem when passing parameter into function testObj().

How I can pass value from jquery hover() to my function I create?

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>

Upvotes: 0

Views: 356

Answers (1)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28523

You have written function testObj inside another function hence not reachable from outside. Also define mainData and contentData as global so that it will be available in testObj function. please put it outside it as shown below

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');
    }
  }

Upvotes: 1

Related Questions