使用 jquery 或 css 更改用于工具提示的 HTML 元素的“标题”属性的内容

Question

我有以下 html 元素：

<a href="#" id="pinterest" alt="PINTEREST">
  <img alt="PINTEREST" title="PINTEREST" src="image.png" class="icon">
</a>

我需要将title 属性值从“pinterest”更改为“联系我们”，当用户将鼠标悬停在上述图片上时，它会用作工具提示。

我已经进行了一些搜索，但我认为它不能用 CSS 完成（除了可能使用 :before 或 :after 伪元素？），所以我现在正在尝试使用 jQuery。

我的 jQuery 看起来像这样：

jQuery(document).ready(function($) {
  $('#pinterest img').attr( 'title', 'Contact Us' );
)};

但它不起作用。

我注意到我的 jQuery 版本是 1.11.3，如果它是相关的（我了解了 prop 用于更高版本）

谢谢。

Answer 1

jQuery(document).ready function 有问题，因为您在右括号后添加了卷曲

例如

document.ready 函数以)}; 结尾，而应该以}); 结尾

只需替换：

jQuery(document).ready(function($) {
  $('#pinterest img').attr( 'title', 'Contact Us' );
)};

应该替换为

jQuery(document).ready(function($) {
  $('#pinterest img').attr( 'title', 'Contact Us' );
});

jQuery(document).ready(function($) {
  $('#pinterest img').attr( 'title', 'Contact Us' );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a href="#" id="pinterest" alt="PINTEREST">
  <img alt="PINTEREST" title="PINTEREST" src="image.png" class="icon">
</a>

注意：与 JQuery 库版本无关 :)