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');
});

});

jQuery添加/删除属性和类

1 个答案: