Abdullah Salma
Abdullah Salma

Reputation: 570

jQuery: var(s) set for three functions

After a long search I didn't find what I am looking for, or if I did, it didn't work for what I am doing or I didn't know how to use it properly. In all cases I really need your help in this matter.

What I did is defining my processing div by only identifying the div(s) with ID then the rest is written in jQuery. There is a lot of code, so I'll put up a shortened version.

HTML

<div id="blue" class='processing'>
    <div class="bar"></div>
    <div class="text">BLUE</div>
</div>

<div id="red" class='processing'>
    <div class="bar"></div>
    <div class="text">RED</div>
</div>

<div id="yellow" class='processing'>
    <div class="bar"></div>
    <div class="text">YELLOW</div>
</div>

jQuery

$(".processing").click(function () {
    var $this  = $(this);
    var ID     = $this.attr('id');

    switch(ID){
        case "blue":
            var name      = $this.find(".text").text();
            var width     = 60;
            // some other var(s)
        break;
        case "red":
            var name      = $this.find(".text").text();
            var width     = 40;
            // some other var(s)
        break;
        case "yellow":
            var name      = $this.find(".text").text();
            var width     = 20;
            // some other var(s)
        break;
    }
    $this.find(".text").text("THE " + name);
    $this.find(".bar").css("width", width + "%");
    // some other complicated coding
});

Explanation of what the code does

This is the simple version, the html for all div(s) is the same but the IDs are different and the text div also. Once the div is clicked, the code will get the ID then match it with the switch to get the right variables for it, (there are a lot more variables than this). Let's say that the div marked with the ID blue is clicked, the div marked with class bar inside blue, its width will change to 60% according to the switch. If red was clicked, the bar's width for red will change to 40% and so on.

All the important variables are inside the click function. what I want is...

What I want

Before clicking, I want the user to be able to hover the mouse over the bar and next to the text the parentage will show up without clicking, then disappear once the mouse is away.

I know how to do that with functions, using mouseenter, and mouseleave.

The problem

the problem is... I'll have to use the variables 3 times. For mouseenter, mouseleave and for click. How could I do that or what should I do with the variables so I will be able to use them inside these three functions without repeating them.

The processing div is a rectangle,

the bar div is the background,

and the text div is the text over the processing bar.

Picture to explain: https://i.sstatic.net/EOyoy.png

1 Reminder

In this example the var I want to use in all functions is width. But in the code I have (long version), not just one variable.

Upvotes: 2

Views: 97

Answers (2)

Chad Hedgcock
Chad Hedgcock

Reputation: 11785

Robby's answer is good. I'm also a big fan of the data attribute for embedding element-specific stuff right into the element.

I'm also using the data attribute to mark the element as clicked when it's been clicked, so that mouseover and mouseleave can look for that and have different behaviors when it's already clicked (if any at all).

<div id="blue" class="processing" data-width="60">
  <div class="bar"></div>
  <div class="text">BLUE</div>
</div>

<div id="red" class="processing" data-width="40">
  <div class="bar"></div>
  <div class="text">RED</div>
</div>

<div id="yellow" class="processing" data-width="20">
  <div class="bar"></div>
  <div class="text">YELLOW</div>
</div>

$(".processing").on("mouseover", function () {
   if( ! $(this).data("clicked")){
     //if it hasn't been clicked yet, do something
   }else{
     //otherwise, leave it alone
   }
});

$(".processing").on("mouseleave", function () {
  if( ! $(this).data("clicked")){
    //if it's already clicked, leave it alone
  }else{
    //otherwise, revert the changes from mouseover
  }
});

$(".processing").on("click", function () {
  var name   = $(this).find(".text").text();
  var width = $(this).data("width");
  $(this).find(".text").text("THE " + name);
  $(this).find(".bar").css("width", width + "%");
  $(this).data("clicked", true); //mark the div as clicked
  // some other complicated coding
});

Upvotes: 0

Robby Cornelissen
Robby Cornelissen

Reputation: 97282

Why don't you declare all your variables inside an object:

var data = {
    blue: {
        width: 60,
        // other variables
    },
    red: {
        width: 40,
        // other variables
    },
    yellow: {
        width: 20,
        // other variables
    }
}

Then you can use your data object wherever you need it:

var ID = $this.attr('id');
var width = data[ID].width;

Upvotes: 5

Related Questions