Question

我正在创建一个用户注册表单，并且可以选择为用户选择头像图标，为此我使用以下代码...

 <ul class="icons clearfix">
     <li><img src="images/123456.jpg" title="123456" alt="123456" width="34" height="34" /></li>
     <li><img src="images/654321.jpg" title="654321" alt="654321" width="34" height="34" /></li>
 </ul>

并遵循jquery代码......

$(document).ready(function(){
    $('ul.icons li').click(function() {
        $(this).removeClass('selected');
        $(this).addClass('selected');
        var selected_img = $('img',this).attr('alt');
        $('.avatar').val(selected_img); 
    });

});

首先，我的方法是否正确？如果用户再次点击任何其他图像并且相应地更新了头像图像，它应该从li元素中删除所选类。感谢。

Answer 1

我不是依赖额外的js，而是喜欢使用已经使用单选按钮和标签内置的内容：

<ul class="icons clearfix">
    <li>
        <input type='radio' id='icon-123456' value='123456' name='current_icon'/>
        <label for='icon-123456'>
            <img src="images/123456.jpg" title="123456" alt="123456" width="34" height="34" />
        </label>
    </li>
    <li>
        <input type='radio' id='icon-654321' value='654321' name='current_icon'/>
        <label for='icon-654321'>
            <img src="images/654321.jpg" title="654321" alt="654321" width="34" height="34" />
        </label>
    </li>
</ul>

然后只需隐藏单选按钮：

.icons input{
    display:none;
}

JS：

$('ul.icons li').click(function() {
    $('ul.icons li.selected').removeClass('selected');
    $(this).addClass('selected');
});

Answer 2

您实际上应该使用IMG进行点击，而不是LI。

 $('ul.icons img').click(function() {
        $('ul.icons img').removeClass('selected'); // -- remove all other SELECTED
        $(this).addClass('selected');
        var selected_img = $(this).attr('alt');
        $('.avatar').val(selected_img); 
    });

单击选择用户图标

2 个答案: