Блог

Я работаю над интерактивной картой поиска, в которой используются карты изображений, спрайты переноса и поля выбора ввода!

Вы можете увидеть мой рабочий пример здесьhttp://jsfiddle.net/mediacake/FxS6j

Проблема, с которой я сталкиваюсь при попытке перейти по ссылке выше, заключается в том, что я также использую jQuery jqtransform для оформления элементов формы.. что добавляет дополнительную сложность… хорошо для меня! Чтобы знать, как устанавливать и снимать флажки с поля выбора и его нового элемента styles, созданного jqtransform!

У меня почти получилось, но есть несколько ошибок, которые мне трудно исправить!

Надеюсь, у кого-нибудь есть идея, как сделать правильно?

Хорошо, после многих правок, я думаю, мы, наконец, перейдем к решению здесь. 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');
});

});