jquery - 如何更改选择列表项的背景图像？

Question

所以我有一个 3 步骤列表项。

项目 1第2项第 3 项

我需要在选择每个图像时显示背景图像(箭头)。如果用户单击项目 2，箭头将从项目 1 中消失并出现在项目 2 等中。

我尝试过类似的事情，但不确定......

         <script>
                $(".theSteps li").change(function () {
                $(".theSteps li:selected").each(function () {
                $('.theSteps li').css('background-image','url()');
                });
                $('.theSteps li').css('background-image','none');
                })
                .trigger('change');

            </script>

Answer 1

您还没有提供 HTML，因此很难创建您需要的完整 JavaScript。如果您可以添加该内容，我可以为您提供更多详细信息。

最简单的方法是创建一个 CSS 类，用于将背景图像设置为您要使用的图像的背景图像。

如果在选择列表项时运行函数，则可以运行 jQuery 函数 addClass添加新类以指定所选项目的背景图像 - 类似于:

$('#mylistitem').addClass('BackgroundImageClassName');

在此行之前，您可以使用以下方法从任何现有项目中删除该类:

$('li.BackgroundImageClassName').removeClass('BackgroundImageClassName');

假设你的 html 看起来像这样:

<ul class="theSteps">
  <li>first item</li>
  <li>second item</li>
</ul>

您可以使用这样的代码:

$('ul.theSteps li').click(function() { 
  $('li.newBackgroundImageClass').removeClass('newBackgroundImageClass');
  $(this).addClass('newBackgroundImageClass');
});