代码之家  ›  专栏  ›  技术社区  ›  Craig McQueen

jquery图像选择器在IE7中不工作

  •  2
  • Craig McQueen  · 技术社区  · 17 年前

    我有一些html,比如:

    <div id="avatar_choices">
        <label for="id_choice_0">
            <input id="id_choice_0" type="radio" name="choice" value="7" />
            <img src="someimage.jpg" />
        </label>
        <label for="id_choice_1">
            <input id="id_choice_1" type="radio" name="choice" value="8" />
            <img src="someimage2.jpg" />
        </label>
    </div>
    

    $('#avatar_choices input').hide();
    $('#avatar_choices img').click(function(){
        $('#avatar_choices img').css('border', '2px solid #efefef');
        $(this).css('border', '2px solid #39c');
        $(this).siblings('input').attr('checked', 'checked');
    });
    

    目标是允许用户在图像选项上点击,选择一个带有边框颜色的突出显示。

    这在FF中运行良好。由于某些原因,在IE中,一旦我单击一个图像,单击另一个图像,然后尝试单击第一个图像,边框将不会更改(尽管它确实被选中)。

    编辑: 我的解决方案一半是偶然发生的。由于redsquare的回答,我将代码更改为:

    $('#avatar_choices input').hide();
    $('#avatar_choices img').click(function(){
        $('#avatar_choices img').removeClass('selected');
        $(this).addClass('selected');
        $(this).siblings('input').attr('checked', 'checked');
    });
    

    哪里:

    #avatar_choices img.selected{border:2px solid #39c;}
    

    想想看吧

    1 回复  |  直到 17 年前
        1
  •  0
  •   redsquare    17 年前

    在此场景中,最好使用addClass和removeClass。易于维护。

    推荐文章