Javascript 多次使用链接选择文本

Javascript 多次使用链接选择文本,javascript,html,Javascript,Html,我在网上找到了以下代码,效果很好。我想在同一页上的多个元素上使用它,但不知道如何做到这一点。我可以让第一个工作,但第二个不行 有人能帮忙吗 谢谢 约翰 Javascript: function SelectText(element) { var doc = document , text = doc.getElementById(element) , range, selection ; if (doc.body.creat

我在网上找到了以下代码,效果很好。我想在同一页上的多个元素上使用它,但不知道如何做到这一点。我可以让第一个工作,但第二个不行

有人能帮忙吗

谢谢

约翰

Javascript:

    function SelectText(element) {
    var doc = document
        , text = doc.getElementById(element)
        , range, selection
    ;    
    if (doc.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) {
        selection = window.getSelection();        
        range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

document.onclick = function(e) {    
    if (e.target.className === 'select') {
        SelectText('some_text');
    }
};
HTML:

要选择的文本
要选择的更多文本

您可以使用要选择的元素id为每个跨度指定一个特殊属性:

//JS
SelectText(e.target.attributes["select"].value);
//HTML
<span class='select' select="some_text">select</span>
<span class='select' select="more_text">select</span>

对于您的情况,您可以:

SelectText(e.target.previousSibling.id);

因为您使用相同的参数调用函数

SelectText('some_text')

无论单击哪个class=“select”,都将选择“要选择的文本”

请尝试以下代码:

function SelectText(element) {
    var doc = document
    , text = doc.getElementById(element)
    , range, selection;    
    if (doc.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) {
        selection = window.getSelection();        
        range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

document.onclick = function(e) {    
    if (e.target.className === 'select') {
        SelectText(e.target.getAttribute('data-id'));
    }
};
并更改HTML:

<span id ='some_text'>Text to select </span><span class='select' data-id="some_text">select</span>

<span id ='more_text'>More text to select</span><span class='select' data-id="more_text">select</span>
要选择的文本
要选择的更多文本

谢谢。不幸的是,在第二个span选择第一个span文本时无法工作。忽略我的上一条消息。我打错了。很好,谢谢。
function SelectText(element) {
    var doc = document
    , text = doc.getElementById(element)
    , range, selection;    
    if (doc.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) {
        selection = window.getSelection();        
        range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

document.onclick = function(e) {    
    if (e.target.className === 'select') {
        SelectText(e.target.getAttribute('data-id'));
    }
};
<span id ='some_text'>Text to select </span><span class='select' data-id="some_text">select</span>

<span id ='more_text'>More text to select</span><span class='select' data-id="more_text">select</span>