javascript - 替换 jQuery 中特定类的图像标题属性

Question

我正在尝试交换页面上类名称中包含字符串 slide 的所有图像的 title 属性。图像类名称各不相同，后跟一个唯一的数字字符串(例如:slide-1234、slider-4321)，因此重要的是它只包含字符串 slide 。我想用 WordPress 帖子标题替换它。到目前为止，这是我的代码(不起作用)

<script>
var title = '{{get_the_title()}}';
$('img[class*=slide]').attr('title', title);
</script>

非常简单，但不幸的是不起作用。我使用 alert 进行调试并能够打印标题，但选择器是问题所在。

这是 HTML

<h6 class="text-primary mb-5 mt-5">Session Photos</h6>
<div id="metaslider-id-1572" style="width: 100%;" class="ml-slider-3-15-3 metaslider metaslider-flex metaslider-1572 ml-slider">
    <div id="metaslider_container_1572">
        <div id="metaslider_1572">
            <ul aria-live="polite" class="slides">
                <li style="display: block; width: 100%;" class="slide-1573 ms-image"><img src="https://knowledge.page.org/wp-content/uploads/2019/07/DSC04292-850x500.jpg" height="500" width="850" alt="" class="slider-1572 slide-1573" title="DSC04292" /></li>
            </ul>
        </div>

    </div>
</div>

Answer 1

我相信您的脚本在 DOM 完全加载之前就已运行。您可以将脚本代码放在 body 标记的底部或者尝试使用 $(document).ready(function(){.. .}).

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    var title = 'someTitle';
    $('img[class*=slide-]').attr('title', title);
  });
</script>

<h6 class="text-primary mb-5 mt-5">Session Photos</h6>
<div id="metaslider-id-1572" style="width: 100%;" class="ml-slider-3-15-3 metaslider metaslider-flex metaslider-1572 ml-slider">
    <div id="metaslider_container_1572">
        <div id="metaslider_1572">
            <ul aria-live="polite" class="slides">
                <li style="display: block; width: 100%;" class="slide-1573 ms-image"><img src="https://knowledge.page.org/wp-content/uploads/2019/07/DSC04292-850x500.jpg" height="500" width="850" alt="" class="slider-1572 slide-1573" title="DSC04292" /></li>
            </ul>
        </div>

    </div>
</div>