jQuery添加/删除属性和类

Question

我正在开发一个交互式搜索地图,它使用图像映射和翻转精灵以及输入选择框!

你可以在这里看到我的工作示例http://jsfiddle.net/mediacake/FxS6j/

我尝试上面的链接时遇到的问题是我也使用jQuery jqtransform来设置表单元素的样式..这增加了一些额外的难度......对我来说很好!要知道如何选中和取消选中由jqtransform制作的选择框及其新样式元素!

我几乎得到了它,但有一些错误,我很难修复!

希望有人知道如何做对吗？

Answer 1

好吧，经过多次编辑，我想我们终于找到了解决方案。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');
});

});