Question

我在网上发现以下代码效果很好。我想在同一页面上的多个元素上使用它，并且不知道如何执行此操作。我可以让第一个工作但不是第二个。

有人可以帮忙吗？

谢谢，

约翰

使用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：

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

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

Answer 1

您可以为每个范围指定一个特殊属性，其中包含您要选择的元素的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);

Answer 2

因为你用相同的参数调用函数。

SelectText('some_text');

＆＃34;要选择的文字＆＃34;将被选中，无论什么类=＆＃34;选择＆＃34;你点击了。

试试这段代码：

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>

Answer 3

根据您的情况，您可以这样做：

SelectText(e.target.previousSibling.id);

多次使用链接选择文本

3 个答案: