仅通过单击function在活动类中添加/附加图像

我知道你经常遇到的事情……但我会试着描述一下。

我有一个链接列表。 我还有一个脚本，通过向其添加一个类来使已点击的链接处于活动状态。 每次点击链接时，我们都会有不同的活动链接。

问题是，每次发生这种情况时，我都希望图像前置于此ACTIVE链接。 我设法添加此图像但不幸的是脚本添加此图像每次点击链接而不仅仅是活动链接。 我希望此图像仅作为活动类链接的前置。

我的脚本是：

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

对不起，如果我没有很好地描述它，你可以看到我的代码…如果我能说它更简单，我想只有一个球只有活动链接可能会点击更改。

http://jsfiddle.net/dstpt/390/

Answer 1

我修改了你的代码并清理了它…

这是小提琴： http ： //jsfiddle.net/dstpt/395/

基本上我使用CSS：之前显示你的图像。

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

JS（简化它）

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

CSS

 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://sofzh.miximages.com/jquery/soccer-ball-small.jpg'); } 

Answer 2

加上这个

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

在你的脚本的第11行之后。

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

这是您更新的演示

Answer 3

我修复了你的小提琴http://jsfiddle.net/dstpt/392/

你需要从li删除图像。 在将它附加到选定的

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

Answer 4

我知道你的问题没有CSS标签，但你的问题的另一个可能的解决方案是.active:before css条目.active:before添加.active:before图像。 这样做的好处是你当前的JS工作得很好。

工作演示

CSS：

 .active:before { content:""; display: inline-block; width: 125px; height: 125px; background: url('http://sofzh.miximages.com/jquery/soccer-ball-small.jpg') no-repeat; }