从属性中获取数据并使用它替换其他文本

Question

我正在构建一个图例--当用户单击一个图标时，我想从“数据标题”属性中获取数据，然后使用该文本替换“p.map-传奇-key_copy”，该文本目前写的是“标记文本”。

到目前为止我的密码是..。

HTML：

<div class="map-legend">
    <ul class="map-legend-list cf">
        <li class="map-legend-list__item legend-1" data-title="legend one"><i class="fa fa-map-marker"></i></li>
        <li class="map-legend-list__item legend-2" data-title="legend two"><i class="fa fa-map-marker"></i></li>
        <li class="map-legend-list__item legend-3" data-title="legend three"><i class="fa fa-map-marker"></i></li>
        <li class="map-legend-list__item legend-4" data-title="legend four"><i class="fa fa-map-marker"></i></li>
        <li class="map-legend-list__item legend-5" data-title="legend five"><i class="fa fa-map-marker"></i></li>
    </ul>
    <div class="map-legend-key">
        <p class="map-legend-key__copy">Marker text</p>
    </div>
</div><!-- map-legend -->

jQuery：

$('.map-legend-list__item').click(function() {
    var legendText = $(this).attr('data-title');
    $('p.map-legend-key__copy').replace('Marker text', legendText);
});

特纳克斯杰克。

Answer 1

应该有

var legendText = $(this).data('title');

如果您想替换整个文本

$('p.map-legend-key__copy').text(legendText);

如果您想替换Marker text

$('p.map-legend-key__copy').text($('p.map-legend-key__copy').text().replace('Marker text', legendText));

Answer 2

这可能是另一种方式：

var legendText = $(this).data('title');
$(".p.map-legend-key__copy").html(function(i,t){
    return t.replace('Marker text', legendText)
});