jQuery adding/removing attribute and class
I am working on a interactive search map, which uses image maps and rollover sprites and input selectboxes!
You can see my working example here http://jsfiddle.net/mediacake/FxS6j/
The problem I've got when you try the above link is I am also using jQuery jqtransform to style the form elements.. which adds a extra bit of difficulty... well for me! To know how to che开发者_开发百科ck and uncheck a select box and its new styles element made by jqtransform!
I've almost got it, but there are a few bugs which I am having a hard time fixing!
Hope someone has an idea how to get right?
Ok after many edits I think we finally go to a solution here. jsFiddle
$(function() {
$('form').jqTransform({
imgPath: 'img/'
});
//Better to cache these selectors if we are using them more than once
var jqCheckbox = $('.jqTransformCheckbox');
var maps = $('#map-container AREA');
//Unbind the default behaviour set by jqTransform because it was causing double events
jqCheckbox.unbind('click');
//Rebind it with our modified behaviour
jqCheckbox.click(function(evt) {
var jqTrans = $(this).toggleClass('jqTransformChecked');
//It would be faster to use an id selectors #id instead of a class selectors .id here
var checkbox = jqTrans.next('input[type=checkbox]');
$('.' + checkbox.prop('id') + '-map').toggleClass('selected'); // img select
checkbox.prop('checked', !checkbox.prop('checked'));
});
maps.click(function(evt) {
evt.preventDefault();
var id = $(this).prop('id');
$('.' + id + '-map').toggleClass('selected'); // img select
$('.' + id + '-link').toggleClass('jqTransformChecked'); // a. tickbox
//Limit to checkboxes because map share same id
var checkbox = $('input[type=checkbox][id=' + id + ']');
checkbox.prop('checked', !checkbox.prop('checked'));
});
maps.hover(function(evt) {
$('.' + $(this).prop('id') + '-map-hover').toggleClass('selected'); // img hover
//Uncomment if you want tickbox selected
//$('.' + $(this).prop('id') + '-link').toggleClass('jqTransformHover') // checkbox
});
//Replace with .srow
//Better to use id selector here i.e. div id=srow
$('.form-row label').hover(function(evt) {
var id = $(this).find('input').prop('id');
$('.' + id + '-map-hover').toggleClass('selected'); // img hover
//Uncomment if you want tickbox selected
// $('.' + id + '-link').toggleClass('jqTransformHover') // checkbox
});
$('.form-row input[type=checkbox]').change(function(evt) {
var map = $('.' + $(this).attr('id') + '-map'); // img select
map.toggleClass('selected');
});
});
精彩评论