单击时更改 div 样式答案

【问题标题】：Change div style upon click单击时更改 div 样式
【发布时间】：2013-11-21 10:31:22
【问题描述】：

我有一个 div 说 <div style="background-position: 50% 0"></div>。

我想要的是每次点击background-position 50% 以上，即<div style="background-position: 100% 0"></div>，然后<div style="background-position: 150% 0"></div> 等等。有没有办法用 jquery 做到这一点？

【问题讨论】：

使用.css()函数来实现
您的问题标题为“单击时更改字体样式”，而您的问题询问背景位置？ :)
是的，请编辑标题或问题...
抱歉，我的想法太多了 ;-) 改变了

标签： jquery styles background-position

【解决方案1】：

尝试使用.animate()jquery方法：

$('div').click(function () {
    $(this).animate({
        backgroundPositionX: '+=50%'
    },0);
});

【讨论】：

这确实成功了。谢谢！因此，如果我想减少 50%，我必须将其更改为 '-=50%'，对吗？

【解决方案2】：

fiddle Demo

$('div').click(function () {
    var perc = parseInt($(this).attr('style').match(/\d+%/g)) + 50;
    $(this).attr('style', "background-position: " + perc + "% 0");
});

要么

fiddle Demo

$('div').click(function () {
    var perc = parseInt($(this).attr('style').match(/\d+%/g)) + 50;
    $(this).css("background-position", perc + "% 0");
});

【讨论】：

【解决方案3】：

$('div').css('background-position', function (i, value) {
    var x = parseInt(value, 10);
    return (x + 50) + "%" + " 0";
});

【讨论】：