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

Question

我正在构建一个图例 - 当用户单击图标时，我想从“data-title”属性中获取数据，然后使用该文本替换当前的“p.map-legend-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);
});

谢谢， jack 。

Answer 1

应该有

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

如果你想替换整个文本

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

如果您只想替换标记文本

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