如何将变量传递给Jquery函数

MDP 发表于 Dev

MDP

我是JQuery的新手，我正尝试使用Internet上提供的函数，当您浏览HTML元素时该函数会显示工具提示。

这是功能：

<script>
$(document).ready(function() {
   $('#my-tooltip').tooltipster({
        content: $('<span>This text is in bold case !</span>')
   });
});
</script>

<img src="img.jpg" id="my-tooltip">

假设我想将此功能应用于页面上的许多元素，例如：

  <img src="img1.jpg" id="my-tooltip1">
  <img src="img2.jpg" id="my-tooltip2">
  <img src="img3.jpg" id="my-tooltip3">

我应该如何编辑功能？我做不到

<img src="img.jpg1" id="my-tooltip1" onmouseover="javascript:functionName('tooltip1')" onmouseout="javascript:functionName('tooltip1')">

因为此功能将无法像现在那样工作。

谢谢

粉红海龟

如已经建议的那样，使用CSS类选择启用了工具提示的元素。

可以使用自定义data-属性对工具提示的文本进行参数设置。

$(document).ready(function() {
  $('.tooltip').each(function() {
    $(this).tooltipster({
      content: $(this).attr("data-tooltip")
    });
  });
});

.tooltip {
  cursor: help;
  height:100px;
  width:100px;
}
.tooltipster-base {
  display: inline-block;
  border: 1px solid #222;
  margin: 0;
  padding: 2px 4px;
  background: #ccc;
  border-radius:2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/js/jquery.tooltipster.js"></script>
<img class="tooltip" data-tooltip="I am a unicorn!" src="https://s-media-cache-ak0.pinimg.com/originals/e3/ab/d2/e3abd2c3b64151e4c1dfe59e5a2227dc.jpg">
<img class="tooltip" data-tooltip="Look at me!" src="http://cartoon-animals.disneyimage.com/_/rsrc/1367525874171/cartoon-unicorn-clipart/Unicorn-Clipart_7.png">
<img class="tooltip" data-tooltip="I poop rainbows" src="http://grid.turtlespeak.net/upload/LMo6pu2bZ3pYC5QU/iH3dtwYF1tOwoBd8/un1.png">

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。