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');
});

Answer 2

好的，我有一个适合你的工作解决方案。您需要做的就是将辉光类修改为背景图像（并整理定位等）。

http://jsfiddle.net/jezzipin/5J698/

正如上面的一些人在评论中所说，最好的方法是使用一个css类，它只对你刚刚点击的元素有效。在我的例子中，我称这个类为发光 - ＆gt;

  .glow{
 background-color: #FF0000;   
 }

它所做的只是将元素的背景颜色更改为红色。

现在为jQuery函数（可能与自动调用document.ready（）的小提琴不同） - ＆gt;

  jQuery(document).ready(function () {
          $('.theSteps').click(function() {
          $('.theSteps').removeClass('glow');
          $(this).addClass('glow');             
   });

   });

此函数使用类.theSteps从所有元素中删除glow类，然后将其应用于刚刚单击的任何元素，我们可以使用$（this）引用它。

如何在选择中更改列表项的背景图像？

2 个答案: