jquery - 根据单击的元素用不同的值替换元素的文本（简化代码）

Question

我有以下代码和 8 个不同的 .overlay 元素。我想根据单击的 .overlay 更改具有唯一值的#target 的文本。如果我使用其中的 8 个并使用唯一 ID 而不是 .overlay 类作为我的选择器，它会起作用，但我更愿意让它尽可能干净，也许使用 var 代替“一些文本”

$('.overlay').on("click",function(){
    $('#target').animate({'opacity': 0}, 1000, function () {
        $(this).text("some text");
    }).animate({'opacity': 1}, 1000);
});

Answer 1

您可以在项目上添加一个data属性.overlay并使用该值。它可能看起来像这样：

$('.overlay').on("click",function(){
    var $clicked = $(this);
    $('#target').animate({'opacity': 0}, 1000, function () {
        $(this).text($clicked.data('text'));
    }).animate({'opacity': 1}, 1000);
});

你的 html 看起来像：

<div class="overlay" data-text="some-text"></div>

Answer 2

在叠加层上设置标题属性，然后执行以下操作：

$('.overlay').on("click",function(){
    var text = $(this).attr("title");
    $('#target').animate({'opacity': 0}, 1000, function () {
        $(this).text(text);
    }).animate({'opacity': 1}, 1000);
});

演示http://jsfiddle.net/calder12/PJTre/1