Jquery 通过单击函数仅在活动类中预结束/追加图像

我知道这是你不常遇到的事情，但我会试着描述一下

我有一个链接列表。我还有一个脚本，通过添加一个类来激活已单击的链接。每次点击一个链接，我们都有一个不同的活动链接

问题是，每次发生这种情况时，我都希望在这个活动链接前添加一个图像。 我设法添加这个图像，但不幸的是，每次点击链接时脚本都会添加这个图像，而不仅仅是针对活动链接。我希望此图像仅用于活动类链接

我的剧本是：

$(function(){
    var sidebar = $('#sidebar');
    sidebar.delegate('a.inactive','click',function(){
        sidebar.find('.active').toggleClass('active inactive');
        $(this).toggleClass('active inactive');
        $(this).prepend('<img class="gallery-selected-bg" src="http://www.saugeentimes.com/496%20Liz/girls%20soccer%20aug%204,%202010/soccer-ball-small.jpg">');
    });
});

$（函数（）{
var侧栏=$（“#侧栏”）；
侧栏.delegate（'a.inactive'，'click'，函数（）{
find（'.active'）.toggleClass（'active-inactive'）；
$（this.toggleClass（'active-inactive'）；
$（this.prepend（“”）；
});
});

对不起，如果我没有描述好它，你可以看到我的代码请。。。如果我可以告诉它更简单，这是我想要的只有一个球的活动链接，可能会改变点击

添加此

$("img.gallery-selected-bg").remove();

在脚本的第11行之后

它将删除以前添加的所有图像

这是你最新的我把你的小提琴修好了

您需要从

li

中删除图像。在将其附着到选定对象之前

$('li .gallery-selected-bg').remove();

---

我知道你的问题没有CSS标签，但你问题的另一个可能解决方案是添加带有

.active:before

CSS条目的图像。这样做的好处是您当前的JS可以正常工作

CSS:

---

我修改了你的代码并清理了一下

这是小提琴：

基本上，我使用CSS:before来显示您的图像

HTML（将您的版本简化为只需要活动类）

CSS

---

嗯，我必须马上想得更简单些。。非常感谢。虽然这样做有效，但您应该接受@Populus answer。他为你做了更多：）谢谢你，这是一个很好的解决方案！我使用prepend img的原因是因为我希望在位置：相对图像上有一个位置：绝对图像，以便在另一个图像上有一个图像（覆盖）。但是我想这也适用于你的方式。是的，我尽可能多地使用CSS而不是javascript（代码更少，通常性能更好），如果你可以接受不关心IE7甚至IE8查看器，那么就完全使用CSS3吧！

.active:before {
  content:"";
  display: inline-block;
  width: 125px;
  height: 125px;
  background: url('http://www.saugeentimes.com/496%20Liz/girls%20soccer%20aug%204,%202010/soccer-ball-small.jpg') no-repeat;
}

<div id="sidebar">
    <ul>
        <li><a href="#" id="1" class="active">1</a></li>
        <li><a href="#" id="2">2</a></li>
        <li><a href="#" id="3">3</a></li>
    </ul>
</div>

$(function(){
    var sidebar = $('#sidebar');
    sidebar.delegate('a','click',function(){
        sidebar.find('a').removeClass('active');
        $(this).addClass('active');
    });
});

a {
    border:0;
    background:0;
    font-size:30px;
    color:navy;
}

a.active {
    background-color:#ccd9ff;
    border-radius:15px 15px;
    font-size:30px;
    color:Red;
}

a.active:before {
    content: url('http://www.saugeentimes.com/496%20Liz/girls%20soccer%20aug%204,%202010/soccer-ball-small.jpg');
}