特定の要素に対してのみjQuery関数を起動する方法

Question

これを実現するために私が見つけることができるすべてのソリューションを試しましたが、運がなかった。

このコードは現在、タイトル属性からツールチップを作成するために機能しています。私はそれが要素が特定のクラス.tooltipit、タイトル属性を持つすべての要素ではなく、実行時にのみ実行しようとしています。

私は、動作すると予想されていたクラスセレクタ（最後にコメントアウトされています）の中で、どこで機能を呼び出そうとしましたか分かります。

jQuery(document).ready(function($) { 

    // textFrom : String, the attribute from which the text 
    //   should come, 
    // delta : String or Number, the distance from the cursor at 
    //   which the tooltip should appear 
    function instantTooltips(textFrom, delta) { 
     // if delta exists, and can be parsed to a number, we use it, 
     // otherwise we use the default of 5: 
     delta = parseFloat(delta) ? parseFloat(delta) : 5; 

     // function to handle repositioning of the created tooltip: 
     function reposition(e) { 
      // get the tooltip element: 
      var tooltip = this.nextSibling; 
      // setting the position according to the position of the 
      // pointer: 
      // tooltip.style.top = (e.pageY + delta) + 'px'; 
      // tooltip.style.left = (e.pageX + delta) + 'px'; 
      // tooltip.style.top = (e.pageY + delta - 190) + 'px'; 
      // tooltip.style.left = (e.pageX + delta - 200) + 'px'; 
     } 

     // get all elements that have an attribute from which we 
     // want to get the tooltip text from: 
     var toTitle = document.querySelectorAll('[' + textFrom + ']'), 
     //create a span element: 
     span = document.createElement('span'), 
     // find if we should use textContent or innerText (IE): 
     textProp = 'textContent' in document ? 'textContent' : 'innerText', 
     // caching variables for use in the upcoming forEach: 
     parent, spanClone; 
     // adding a class-name (for CSS styling): 
     span.classList.add('createdTooltip'); 
     // iterating over each of the elements with a title attribute: 
     [].forEach.call(toTitle, function(elem) { 
      // reference to the element's parentNode: 
      parent = elem.parentNode; 
      // cloning the span, to avoid creating multiple elements: 
      spanClone = span.cloneNode(); 
      // setting the text of the cloned span to the text 
      // of the attribute from which the text should be taken: 
      spanClone[textProp] = elem.getAttribute(textFrom); 

      // inserting the created/cloned span into the 
      // document, after the element: 
      parent.insertBefore(spanClone, elem.nextSibling); 

      // binding the reposition function to the mousemove 
      // event: 
      elem.addEventListener('mousemove', reposition); 

      // we're setting textFrom attribute to an empty string 
      // so that the CSS will still apply, but which 
      // shouldl still not be shown by the browser: 
      elem.setAttribute(textFrom, ''); 
     }); 
    } 

    // $('.tooltipit').each(function() { 
    // instantTooltips('title', 15); 
    // }); 

    // calling the function: 
    instantTooltips('title', 15); 

}); 

Answer 1

現在、querySelectorは[title]（タイトル属性を持つすべての要素）です。あなたにも、クラス名を提供する場合、あなたが要求したように、それは例えば、動作するはずです：

var toTitle = document.querySelectorAll('.tooltipit[' + textFrom + ']'); 

は、クラス=「tooltipit」は、それらのページ要素を選択し、title属性を持つだろう。

Answer 2

適切なjQueryプラグインにそれ書き換え

、すべてが

jQuery(document).ready(function($) { 
 
    jQuery.fn.instantTooltips = function(delta) { 
 
    delta = parseFloat(delta) || 5; 
 

 
    return this.each(function() { 
 
     var span = $('<span />', { 
 
     text: $(this).attr('title'), 
 
     css: { 
 
      position: 'absolute', 
 
      top: 0, 
 
      left: 0, 
 
      display: 'none' 
 
     }, 
 
     'class': 'createdTooltip' 
 
     }); 
 

 
     $(this).on({ 
 
     mousemove: function(e) { 
 
      $(this).prev().css({ 
 
      top: e.pageY + delta, 
 
      left: e.pageX + delta 
 
      }); 
 
     }, 
 
     mouseenter: function() { 
 
      $(this).prev().show(); 
 
     }, 
 
     mouseleave: function() { 
 
      $(this).prev().hide(); 
 
     } 
 
     }).before(span); 
 
    }); 
 
    } 
 

 
    $('.tooltip').instantTooltips(15) 
 

 
});

.createdTooltip { 
 
    background: red; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tooltip" title="show this">Mouse here for tooltip !</div> 
 
<br /> 
 
<br /> 
 
<div class="nope" title="show this">This does not have the class !</div>

Answer 3

では、次のようなものを試してみました多くの方が簡単でしょうか？

$('.tooltipit').each(function() { 
    $(this).on('mouseenter', function(){ 
    instantTooltips('title', 15); 
    } 
});