How to manage different elements with the same class in Jquery and html5
Question
Hi Im using a Jquery method to highlight areas of a map. (called maphilight)
The next method highlight a single piece of area when I click on it.
$('.key').click(function(e) {
e.preventDefault();
var data = $(this).mouseout().data('maphilight') || {};
data.alwaysOn = !data.alwaysOn;
$(this).data('maphilight', data).trigger('alwaysOn.maphilight');
});
All the areas have the class of "key" and some of them have also the class of "alpha" or "control".
Now the problem is when I want to highligh with this jquery some areas at the same time using a button("balpha"). For example I want to highlight the areas with the class "alpha".
Then Im using the next method.
$('#balpha').click(function(e) {
e.preventDefault();
var data = $('.alpha').mouseout().data('maphilight') || {};
data.alwaysOn = !data.alwaysOn;
$('.alpha').data('maphilight', data).trigger('alwaysOn.maphilight');
});
When I do this, all the areas with the class "alpha" are highlighted and when I press it again they turn off without problem. The problem is that when I try to do it individually after using the class "alpha" all the areas work as one and get all highlighted when I try to manage then one by one.
I think that its a problem with the variable "data" but I dont know how to manage it. Thank in advice :)
Here is a sample of the code that show my results, hope its help to get a solution!!! thanks again!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Keyboard Designer</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://davidlynch.org/projects/maphilight/jquery.maphilight.js"></script>
<!-- hiligh jQuery implementation -->
<script>$(function() {
$('.map').maphilight({
fillColor: '008800'
});
<!-- function choose individual keycap -->
$('.key').click(function(e) {
e.preventDefault();
var data = $(this).mouseout().data('maphilight') || {};
data.alwaysOn = !data.alwaysOn;
$(this).data('maphilight', data).trigger('alwaysOn.maphilight');
});
<!--function to choose alphanumerics-->
$('#balpha').click(function(e) {
e.preventDefault();
var data = $('.alpha').mouseout().data('maphilight') || {};
data.alwaysOn = !data.alwaysOn;
$('.alpha').data('maphilight', data).trigger('alwaysOn.maphilight');
});
});</script>
</head>
<body>
<img src="http://i.imgur.com/YY2VAs8.png" width="980" height="292" alt="applekeyboard" class="map" usemap="#appleKeyboard">
<map name="appleKeyboard">
<!-- alphanumeric buttoms -->
<area shape="rect" coords="61,58,98,95" href="#" alt="n1" class="key alpha" data-maphilight='{"strokeColor":"0000ff","strokeWidth":2,"fillColor":"ff0000","fillOpacity":0.0}'>
<area shape="rect" coords="104,58,141,95" href="#" alt="n2" class="key alpha" data-maphilight='{"strokeColor":"0000ff","strokeWidth":2,"fillColor":"ff0000","fillOpacity":0.0}'>
<area shape="rect" coords="147,58,184,95" href="#" alt="n3" class="key alpha" data-maphilight='{"strokeColor":"0000ff","strokeWidth":2,"fillColor":"ff0000","fillOpacity":0.0}'>
<area shape="rect" coords="190,58,227,95" href="#" alt="n4" class="key alpha" data-maphilight='{"strokeColor":"0000ff","strokeWidth":2,"fillColor":"ff0000","fillOpacity":0.0}'>
</map>
<fieldset>
<legend>keys group</legend>
<button id="balpha" type="button" value="alpha" >Alphanumeric</button><br />
</fieldset>
</body>
</html>
1 answers
solution1
0 ACCPTED 2014-09-14 19:40:41
OK, code looked innocent enough but the problem exists when you create one data object and apply that to multiple elements.
Objects don't get copied, they get passed as reference. So that means changing the object in what you think is one instance, will actually change all instances because instances are just reference to a single object.
Solution is to loop over each element and treat it's data object as an isolated instance.
$('#balpha').click(function(e) {
e.preventDefault();
$('.alpha').each(function(){
/* element specific data object*/
var data= $(this).data('maphilight') ;
data.alwaysOn = !data.alwaysOn;
$(this).trigger('alwaysOn.maphilight')
});
});
Now when you clcik on individual keys, you are only dealing with the element specific data object, not the single object that was being passed to all keys
If you aren't familiar with object refernce principals here's a simple example that can be run from browser console:
var a={foo:'bar'};
var b= a; /* b is not a copy, but a reference*/
b.foo='godzilla';/* a.foo will be the same value*/
alert(a.foo); //"godzilla"
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.