Reputation: 570
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.
<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>
$(".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
});
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...
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 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
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
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
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