Question

在随机休息时，我发现自己想知道是否可以使用jQuery来确定单个字符在单击时的单个字符。

例如： This

当用户点击第一个h时，jQuery会将此返回给我。

我能想到这样做的唯一方法就是用一个字母的类来包装句子中的每个字符，例如下面的例子：

<span class="clickable T">T</span>
<span class="clickable h">h</span>
<span class="clickable i">i</span>
<span class="clickable s">s</span>

后面跟着$('.clickable').click(function())会返回第二堂课。

我的问题是：这是最有效的方法吗？

Answer 1

显然，在span标签中包装文档的每个字母都是无效的。

我至少可以在Chrome中旋转一些东西。基本上，当您单击一个字母时，它会触发双击，选择该单词。我们得到的选择实际上给了我们整个目标元素的文本。从那里，我们得到被点击的信。我们删除了选择并用字母做我们想要的。

Fiddle here

$(function(){
    $(document).click(function(e){
        var target = e.target;
        $(target).dblclick();    
    }).dblclick(function(){
        var selection,
            node,
           text,
           start,
           end,
           letter;

        if (window.getSelection) {
            selection = document.getSelection();
            node = selection.anchorNode;

            if (node.nodeType === 3) {
                text = node.data;
                start = selection.baseOffset;
                end = selection.extentOffet;

                if (!isNaN(start)) {
                    letter = text.substr(start, 1);
                }
            }
            window.getSelection().removeAllRanges()
        } else if(document.selection) {
            //continue work here
        }

        if (letter) {
            alert(letter);
        }

    });
});

Answer 2

你也可以使用：

返回innerHTML

$('.clickable').on('click', function(){
  alert($(this).html());
});

至于更有效的方式......也许试试这个： in Javascript/jQuery, how to check a specific part of a string and determine if it is a whitespace or letter?

Answer 3

您可以使用此脚本

执行此操作

$('.clickable').on('click', function(){
    var html = $(this).text(); // if you want the text inside the span
    var index = $(this).index(); // if you want the position among siblings

    var classes = $(this).attr('class').split(" ");

    var secondClass = getSecondClass(classes);
});

function getSecondClass(classArray){
    if(classArray.length<2){
        return null;
    }else{
        return classArray[1];
    } 
}

如果您想对点击的元素执行其他操作，我还会包含html和index变量。

基本上你用空格分割元素的类，然后检查数组是否少于两个元素，在这种情况下它返回null，否则返回第二个元素。

jsFiddle

Answer 4

使用span标签动态包装所有文本，您可能正在寻找

<强> JS

$(function(){

        var lengthText  =   $('#singlecharacter').text().length;

        var textValue = $('#singlecharacter').text();

        var textArray =  textValue.split('');

        var newText = new Array();


        for (var i = lengthText - 1; i >= 0; i--) {

            newText[i]  =   "<span class='sp'>"+textArray[i]+"</span>";
        };

        $('#singlecharacter').html(newText);

        $('.sp').click(function()
        {
            alert($(this).text());
        });


        });

<强> HTML

<div id='singlecharacter'>THIS</div>

DEMO JSFIDDLE

单击时确定句子的字符

4 个答案: