0

我正在开发一个演示面板，它应该切换两个不同的背景图像。您单击一个链接并更改了两个 CSS 类。该链接包含 data-field="bg1" 并且此值需要更改 css 类：top-bg0 和 bottombg0。

这是一个小提琴设置：http: //jsfiddle.net/wpcustoms/ktD3f/

有人可以帮我处理javascript吗？

到目前为止，这就是我想出的：

$('.panel ul li a').click(function(){
    var bgname = $(this).data('bg');
    $('#headerbar').removeClass('top-bg0').toggleClass(bgname);
    $('#footerbar').removeClass('bottom-bg0').toggleClass(bgname);
});

它当前删除了 top-bg0 部分并将其替换为数据字段 (bg1,2,3) 单击另一个链接会添加另一个类，因此它最终以 class="bg1 bg2 bg3" 而不是更改 top-X 和底部 X 值。有没有办法在类字符串中找到一些东西并替换它？

4

1 回答 1

1

如果您的两个元素每个只有一个类，那么您可以简单地使用无参数版本的.removeClass()来删除当前类是什么，然后添加正确的类：

$('.settings-panel .bg_pattern ul li').click(function(){
    var bgname = $(this).data('bg');
    $('#headerbar').removeClass().addClass('top-' + bgname);
    $('#footerbar').removeClass().addClass('bottom-' + bgname);
});

更新了 jsFiddle 演示

于 2013-02-01T15:21:41.333 回答