Question

我正在制作一个应该切换两个不同背景图像的演示面板。你点击一个链接，两个CSS类被更改。该链接包含data-field =＆＃34; bg1＆＃34;这个值需要改变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 =＆＃34; bg1 bg2 bg3＆＃34;而不是更改top-X和bottom-X值。有没有办法在类字符串中查找某些东西并替换它？

Answer 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);
});

Updated jsFiddle demo

在两个不同的类中切换一个数据值

1 个答案: