Jquery 单击选择用户图标

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

 <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>

---

首先，我的方法正确吗？如果用户再次单击任何其他图像，它应该从

li

元素中删除所选的类，并且化身图像应该相应地更新。谢谢。

您实际上应该使用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); 
    });

---

实际上，您应该使用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); 
    });

---

与依赖额外的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>

JS:

---

与依赖额外的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>

JS:

---

但是你能告诉我，为什么我们用img而不是li吗？它有语义上的意义。用户正在选择图像，那么为什么选择包装它的项目呢？但是你能告诉我，为什么我们使用img而不是li吗？这是有语义意义的。用户正在选择图像，那么为什么选择包装它的项目呢？谢谢你的回答，你的方式非常好，我也会尝试。非常感谢你的回答，你的方法非常好，我也会试试。非常感谢。

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