2

所以我有一个 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>
4

2 回答 2

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');
});
于 2013-02-22T14:49:49.567 回答
0

好的，我在这里为您提供了一个可行的解决方案。您需要做的就是将发光类修改为背景图像（并整理定位等）

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

正如上面的一些人在评论中所说的那样，最好的方法是使用一个仅在您刚刚单击的元素上有效的 CSS 类。在我的示例中，我将此类称为发光 ->

  .glow{
 background-color: #FF0000;   
 }

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

现在对于 jQuery 函数（可能与小提琴不同，因为它会自动调用 document.ready()）->

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

   });

此函数从所有具有类 .theSteps 的元素中删除发光类，然后将其应用于刚刚单击的任何元素，我们可以使用 $(this) 引用该元素。

于 2013-02-22T15:21:12.460 回答