jquery - 带有 JQuery UI 的可选 IMG

Question

我尝试创建可选择的图像，这些图像是无序列表中的子元素。换句话说，我尝试在单击图像时更改图像的背景颜色。

我有以下带有无序列表的 HTML:

<ul id="select-message-type" class="cm-message-types-menu cm-message-types-ul">
    <li id="all" class="cm-all-messages">
        <img src="Images/IMIcon.png" /><br />
        All
    </li>
    <li id="email" class="cm-message-type-icon-wrap">
        <img src="Images/IMIcon.png" /><br />
        Email
    </li>
    <li id="im" class="cm-message-type-icon-wrap">
        <img src="Images/IMIcon.png" /><br />
        IM
    </li>
    <li id="call" class="cm-message-type-icon-wrap">
        <img src="Images/IMIcon.png" /><br />
        Call
    </li>
    <li id="fax" class="cm-message-type-icon-wrap">
        <img src="Images/IMIcon.png" /><br />
        Fax
    </li>
</ul>

然后是我用来添加选择样式的 CSS:

#select-message-type .ui-selecting {
        background-color: azure;
    }

    #select-message-type .ui-selected {
        background-color: red;
    }

我使用以下 JQuery 初始化 selectable:

$("#select-message-type").selectable();

这些图片是简单的图标。当用户单击该图像时是否可以更改背景颜色。换句话说，是否可以为这些图像实现可选择的 JQuery UI？

谢谢

Answer 1

你可以使用这个 CSS:

#select-message-type .ui-selected img {
    background-color: green;
}

Example