jQuery添加/删除属性和类

我正在开发一个交互式搜索地图，它使用图像地图、滚动精灵和输入选择框

你可以在这里看到我的工作示例

当您尝试上面的链接时，我遇到的问题是，我还使用jQuery jqtransform来设置表单元素的样式。。这又增加了一点难度。。。对我来说很好！了解如何选中和取消选中由jqtransform生成的选择框及其新样式元素

我几乎已经得到了它，但有一些错误，我有一个艰难的时间修复

---

希望有人能想出正确的方法？

好的，经过多次编辑，我想我们终于找到了解决方案

---

你到底有什么问题？您是否试图隐藏默认复选框而只显示样式化的复选框？原始元素应该被

.jqTransfermHidden

隐藏，但被覆盖到

{display:inline；}

让我们看看Daniel得到了什么。您是否研究了最新的jQuery（v1.6）方法和。这些可能会帮助你。嗨，我显示复选框只是为了测试，以确保它们在地图的某个区域被选中时被选中。我仍然是Jquery的初学者！这里缺少一些东西。。。1.将鼠标悬停在标签上可显示地图上的相对区域。2.单击地图区域，勾选选择框并勾选复选框。3.再次单击选择映射区域取消选中复选框和复选框，如果单击复选框映射，复选框选择，则2,3将相同。这有什么用？不用担心它看起来怎么样！iv显示selectboxs的原因是我可以看到他们被选中了！！我不喜欢只设计动作的样式。如果你点击地图上的某个区域，它会高亮显示该区域并勾选该框，但我需要它来选中selectbox！这就是为什么我让他们显示…在最终版本我会再次隐藏他们。现在，如果单击勾选框，地图区域和选择框都将被选中！谢谢，但你还是有同样的问题！如果你点击勾选框，什么都不会发生！当你点击勾选框时，它会使复选框处于选中状态，也会使地图处于选中状态，就像你点击地图时一样。你使用的是什么web浏览器？我想我知道问题出在哪里了。单击勾选框，它会高亮显示地图，但直到第二次单击鼠标右键时才选择该框？

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

});