这是您更新的Demo

Question

我知道你经常遇到的事情......但我会尝试描述它。

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

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

我的脚本是：

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

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

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

Answer 1

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

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

基本上我正在使用CSS：在显示图像之前。

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

<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>

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://www.saugeentimes.com/496%20Liz/girls%20soccer%20aug%204,%202010/soccer-ball-small.jpg');
}

Answer 2

添加此

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

在您的剧本第11行之后。

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

这是您更新的Demo

Answer 3

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

您需要从li中移除图片。在将其附加到选定的

之前

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

Answer 4

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

Working Demo

CSS：

.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;
}

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

4 个答案:

这是您更新的Demo