how to call function on jquery hover()

Question

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>

testobj function is inside the objIn function so it's throwing testObj is not defined — JYoThI
– JYoThI, Commented May 19, 2017 at 9:55
What is the reason of nesting testObj function inside objIn function? — max
– max, Commented May 19, 2017 at 9:55
objIn(mainAnchor,dataItem); function objIn(mainAnchor,dataItem) { function testObj(dataItem) { } } you can pass like this and use like this — JYoThI
– JYoThI, Commented May 19, 2017 at 9:59
Is it posibble to enter nested function? or is there another way how to do it? Reason I wrote my code because I have no idea how to make this into global function — rnDesto
– rnDesto, Commented May 19, 2017 at 9:59

Bhushan Kawadkar · Accepted Answer · 2017-05-19 09:55:15Z

1

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

answered May 19, 2017 at 9:55

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rnDesto Over a year ago

thats what I look for, I just don't get it how to make them global. Thanks for suggestion

Bhushan Kawadkar Over a year ago

happy to help you :)

Collectives™ on Stack Overflow

how to call function on jquery hover()

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related