Question

我有几行jquery来替换click上的默认文本。如何更改默认图像？请建议一个更好的方法来做到这一点。提前致谢！ jsfiddle here

<div class="wrap">
  <span tabindex="1" class="default">videos</span>
  <ul class="filter">
    <li class="vid">
      <a href="#">Videos</a>
    </li>
    <li class="pho">
      <a href="#">Photos</a>
    </li>
  </ul>
</div>

Answer 1

由于您已经拥有图像类，因此只需将它们添加到.default范围即可。只需要一点CSS调整：

.wrap span.default, ul.filter li {
    background: #333 url(http://funr.net/play/spr.png) no-repeat 5px 5px;
}
.filter li.vid, .wrap span.default.vid {
    background-position: 5px 5px;
}
.filter li.pho, .wrap span.default.pho {
    background-position: 5px -17px;
}

现在只需将类名添加到default span：

$(document).ready(function () {
    $('ul.filter li').click(function () {
        $('.wrap').find('.default').text($(this).text())
                  .attr('class', 'default ' + this.className);
    });
});

演示：http://jsfiddle.net/94xLh0ct/

Answer 2

您需要更改图像的位置。你有一个精灵，你需要在点击时改变图像的位置。

此处的工作示例http://jsfiddle.net/fwgLt2f0/2/

$(document).ready(function () {
    $('ul.filter li').click(function (e) {
        e.preventDefault();
        $('.wrap').find('.default').text($(this).text()).css("background-position", $(this).css("background-position"));
    });
});

您需要像示例中那样调整css并进一步修改以使所有像素都完美：）

Answer 3

$(document).ready(function() {
$('ul.filter li').click(function() {
$('.wrap').find('.default').text($(this).text());

   var cssBgPos= $(this).css('background-position'); 
   $('.wrap').find('.default').css('cssText', 'background-position:'+cssBgPos+'!important');

});
});

使用JSFiddle - http://jsfiddle.net/Ashish_developer/s4ut0yc4/

Answer 4

按照此模板，添加您要更改的元素以及图像的相关网址以将其更改为。

$('#yourElement').css('background-image','url(image.jpg)');

Answer 5

因为您正在使用精灵，所以您需要更改背景位置。

像这样（未经测试）：

    if ($(this).hasClass('pho')) {
       $('default').css('background-position', '5px -17px');
    } else if ($(this).hasClass('vid') {
       $('default').css('background-position', '0 0');
    }

如何在点击时更改背景图片？

5 个答案:

演示：http://jsfiddle.net/94xLh0ct/