如何使用鼠标悬停在Jquery中获取给定字符串中的字符索引和字符 [英] How to get the character index and character in given string using mouse hover in Jquery

问题描述

我正在使用下面的代码。

 < div class =clickDvstyle =width：150px; border：1px solid red;>这是一个简单的例子< / div> 
  

以下是Java脚本代码：

<$ （）函数（）{
getCharPos（）;
}）;

函数getCharPos（）{
var selection = window.getSelection（）;
console.log（selection.focusNode.data [selection.focusOffset]）;
console.log（selection.focusOffset）;





$ b

如果我们点击字符串中给出的任何字符，它将返回字符串索引和性格。但是，如何使用.hover（）来实现这一点。

如果我将 .click（）替换为 .hover（），然后将字符悬停在div中，然后 window.getSelection（）给出null p>

所以还有其他方法可以实现这一点。

解决方案

使用lettering.js插件（ https：//raw.github。 com / davatron5000 / Lettering.js / master / jquery.lettering.js ），它在span元素中包装字母（或单词或线条）。

你可以轻松地定位它们，并在这些元素上使用.position（）来获取它们在它们容器中的实际位置（应该有位置：relative）。

： http://jsfiddle.net/rT3zn/2/

HTML：

 < strong>按字< / strong> 
< div class =mycooldiv words>一堆文本在这里，例如一些＃和其他一些酷＃< / div> 
 
< strong>通过字母< / strong> 
< div class =mycooldiv letters>一堆文本在这里，例如一些＃和其他一些酷＃< / div> 
 
< div id =position>< / div> 
  

JS：

  var $ pos = $（'＃position'）; 
 $ b $（'。mycooldiv.words'）
 .lettering（'words'）
 .delegate（'span'，'mouseover'，function（e）{
 var self = $（this）; 
 var position = self.position（）; 
 
 self.addClass（'active'）; 
 $ pos.text（' x：'+ position.left +'，y：'+ position.top +'，content：'+ self.text（））
}）
 .delegate（'span'，'mouseout'，函数（e）{
 var self = $（this）; 
 self.removeClass（'active'）; 
}）; 
 
 
 $（'。mycooldiv.letters'）
 .lettering（）
 .delegate（'span'，'mouseover'，function（e）{
 var self = $（this）; 
 var position = self.position（）; 
 
 self.addClass（'active'）; 
 $ pos.text 'x：'+ position.left +'，y：'+ position.top +'，content：'+ self.text（））
}）
 .delegate（'span'，'mouseout' ，函数（e）{
 var self = $（this）; 
 self.removeClass（'active'）; 
}）
  pre> 
I am using the following code. 
<div class="clickDv" style="width:150px;border:1px solid red;">This is a simple example</div>
And java script code is following:
$('div.clickDv').click( function () {
    getCharPos(); 
});

function getCharPos() {
    var selection = window.getSelection();
    console.log(selection.focusNode.data[selection.focusOffset]);
    console.log(selection.focusOffset);
}
If we click on the any character given in string, It returns the string index and character as well. But how can I achieve this using .hover().

If i replace .click() to .hover(),and hovering the characters in the div then window.getSelection() gives the "null".

So there is any other way to achieve this.
解决方案
You can use the lettering.js plugin (https://raw.github.com/davatron5000/Lettering.js/master/jquery.lettering.js), which wraps letters (or words or lines) in span elements.

This way you can easily target them and use .position() on those elements to get their actual location in their container (which should have position:relative)..

Demo at: http://jsfiddle.net/rT3zn/2/

HTML:
<strong>by word</strong>
<div class="mycooldiv words">bunch of text is in here and for example some # and some other cool #</div>

<strong>by letters</strong>
<div class="mycooldiv letters">bunch of text is in here and for example some # and some other cool #</div>

<div id="position"></div>
JS:
var $pos = $('#position');

$('.mycooldiv.words')
    .lettering('words')
    .delegate('span', 'mouseover', function(e){
        var self = $(this);
        var position = self.position();

        self.addClass('active');
        $pos.text('x:' + position.left+ ', y:' + position.top + ', content: ' + self.text())
    })
    .delegate('span', 'mouseout',  function(e){
        var self = $(this);
        self.removeClass('active');
    });


$('.mycooldiv.letters')
    .lettering()
    .delegate('span', 'mouseover', function(e){
        var self = $(this);
        var position = self.position();

        self.addClass('active');
        $pos.text('x:' + position.left+ ', y:' + position.top + ', content: ' + self.text())
    })
    .delegate('span', 'mouseout',  function(e){
        var self = $(this);
        self.removeClass('active');
    })


                        
这篇关于如何使用鼠标悬停在Jquery中获取给定字符串中的字符索引和字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！