Question

在jQuery Tabs UI中，我正在使用此功能（感谢SO'ers）更改div的CSS，以便根据活动选项卡的data-image属性显示特定图像。

功能：

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

因此，我可以在显示图像时正确地将摄影师归功于：如何更改该功能（见下文），以便使用名为credit的相应数据属性来更改活动标签的文本？并且可以在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...");

Answer 2

这是设置光信号的一种方法

此处示例：http://jsfiddle.net/pxfunc/VhvvG/

修改了jQuery：

var $home = $('#home');

$('#headerwrapper').animate({
    opacity: 'toggle'
}, function () {
    $(this).css("background-image", "url(" + $home.data('image') + ")").animate({
        opacity: 'toggle'
    }).children('#photocredit').html($home.data('credit')); // set the photo credit from data-credit attribute to the child element #photocredit
});

我假设<div id="photocredit"></div>是<div id="headerwrapper"...元素的子元素，如果不是，则执行类似

的操作

$('#headerwrapper').animate({
    opacity: 'toggle'
}, function () {
    $(this).css("background-image", "url(" + $home.data('image') + ")").animate({
        opacity: 'toggle'
    })
});
$('#photocredit').html($home.data('credit')); // set the photo credit from data-credit attribute to the child element #photocredit

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

2 个答案: