jQuery 使用 "data"属性更改 div 中的文本

Question

在 jQuery Tabs UI 中，我使用此函数(感谢 SO'ers)来更改 div 的 CSS，以便根据事件选项卡的数据图像属性显示特定图像。

功能:

var img = $(ui.panel).data("image");
$("#headerwrapper")
.animate({ opacity: 'toggle' }, function() {
$(this).css("background-image", "url(" + img + ")")
.animate({ opacity: 'toggle' });
});
}

HTML 和 CSS:

标签结构中的html:

<div id="home" data-image="/images/water.jpg">tab content</div

<div id="about" data-image="/images/office.jpg">tab content</div>

  ...more tabs...

css(当没有数据图像时，默认为water.jpg):

#headerwrapper {background: url(images/water.jpg);}

因此，当显示摄影师的图像时，我可以正确地归功于摄影师:我将如何更改该功能(见下文)，以便使用名为信用的相应数据属性来更改事件选项卡的文本？ html 中可以有两个不同的数据属性吗？或者有更好的办法吗？

功能:

var img = $(ui.panel).data("credit");
$("#headerwrapper")
.animate({ opacity: 'toggle' }, function() {

$(this).css("background-image", "url(" + img + ")") //what goes here in order
                                                    //change data-credit
                                                    //in the div photocredit?
.animate({ opacity: 'toggle' });
});
}

HTML:在选项卡结构中:

<div id="home" data-image="/images/water.jpg" data-credit="Photog1">tab content</div

<div id="about" data-image="/images/office.jpg" data-credit="Photog2">tab content</div>

      ...more tabs...

在网站页脚中(#headerwrapper 之外):

<div id="photocredit"></div>

而且，#photocredit 的 CSS 是什么？只是这样:#photocredit {}

Answer 1

使用attr函数更改div标签的属性:

$(this).attr("data-credit", "Photographer...");