Question

我正在使用以下代码。

<div class="clickDv" style="width:150px;border:1px solid red;">This is a simple example</div>

java脚本代码如下：

$('div.clickDv').click( function () {
    getCharPos(); 
});

function getCharPos() {
    var selection = window.getSelection();
    console.log(selection.focusNode.data[selection.focusOffset]);
    console.log(selection.focusOffset);
}

如果我们点击字符串中给出的任何字符，它也会返回字符串索引和字符。但是我怎样才能使用.hover（）实现这一点。

如果我将.click()替换为.hover()，并将字符悬停在div中，则window.getSelection()会给出“null”。

所以还有其他方法可以达到这个目的。

Answer 1

你可以使用fonts.js插件（https://raw.github.com/davatron5000/Lettering.js/master/jquery.lettering.js），它包含span元素中的字母（或单词或行）。

通过这种方式，您可以轻松地定位它们并在这些元素上使用.position（）来获取它们在容器中的实际位置（它应该具有位置：相对）..

演示于：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中使用鼠标悬停获取给定字符串中的字符索引和字符

1 个答案: