Jquery関数に変数を渡す方法

Question

私はJQueryを使い慣れていないので、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')"> 

これは今のところ動作しないので機能しません。あなたのスクリプトは次のようになります

<img src="img1.jpg" class="my-tooltip"> 
    <img src="img2.jpg" class="my-tooltip"> 
    <img src="img3.jpg" class="my-tooltip"> 

：

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

Answer 1

すでに提案したように、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">

Answer 2

使用 "クラス" を、ありがとう同様の振る舞いをするべきである：

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

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

お知らせ私は... $（ '私の-ツールチップ'）に

をセレクタを変更したあと、 'クラス' に、画像上のid属性を変更します。

Answer 3

は、複数の要素を識別するためのクラスを使用

は、あなたの代わりに、 "ID" の

Answer 4

tooltipsterの「はじめに」ページに記載されているように、title属性にhtmlエンコーディングを使用することも、イメージごとにtooltipsterを1回呼び出して別のテキストを割り当てることもできます。

<script> 
$(document).ready(function() { 
    $('#my-tooltip1').tooltipster({ 
     content: $('<span>You can tip me</span>') 
    }); 
    $('#my-tooltip2').tooltipster({ 
     content: $('<span>I would like to go boldly</span>') 
    }); 
    $('#my-tooltip3').tooltipster({ 
     content: $('<span>Hello there</span>') 
    }); 
});