Javascript createRange。 如何只用一个脚本选择不同的跨度？

Question

我使用此脚本通过单击一次突出显示一些文本

<script type="text/javascript">
$('#maincode').click(function(){
var span = $('.selectcode')[0],
    sel, range;

if(window.getSelection){
    sel = window.getSelection();
    range = document.createRange();

    range.selectNode(span);
    sel.removeAllRanges();
    sel.addRange(range);
 } else {
    range = document.body.createTextRange();
    range.moveToElementText(span);
    range.select()
 }
});
</script>

哪个适用于代码块：

<code id="maincode">
<span class="selectcode">
TEXT that gets selected by clicking
</span>
</code>

如何使用此脚本突出显示多个代码块，并使用新ID一次又一次地复制脚本？ 另一个代码块可能是这样的：

<code id="secondcode">
<span class="selectcode">
Another block
</span>
</code>

我尝试这样做失败了：

$('#maincode, #secondcode').click(function(){
var span = $('.selectcode')[0],
    sel, range;

感谢大伙们！

编辑：

<code id="maincode" data-target="#text1"><span id="text1">test</span></code>
<code id="secondcode" data-target="#text2"><span id="text2">test</span></code>

<script type="text/javascript">
$('#maincode, #secondcode').click(function(){
    var targetBlockId = $(this).attr("data-target");
    var targetBlock = $(targetBlockId);

    sel, range;

if(window.getSelection){
    sel = window.getSelection();
    range = document.createRange();

    range.selectNode(span);
    sel.removeAllRanges();
    sel.addRange(range);
 } else {
    range = document.body.createTextRange();
    range.moveToElementText(span);
    range.select()
 }
});
</script>

Answer 1

更新3：

单击其中的范围选择文本。 我使用的是类而不是ID。

<span class="span-for-selection">texty text</span>
<span class="span-for-selection">texty text</span>
<span class="span-for-selection">texty text</span>

$('.span-for-selection').click(function() {
    var span = $(this);
    range = document.body.createTextRange();
    range.moveToElementText(span);
    range.select();
})

添加为评论的答案

如果您想使用2个不同的按钮从2个不同的块中进行选择，您只需在每个按钮上指定一些属性，该属性将包含有关用于选择的块的信息，例如按钮和块：

<input type="button" id="btn1" data-target="#text1"/>
<span id="text1">Some text</text>
<input type="button" id="btn2" data-target="#text2"/>
<span id="text2">Some another text</text>

所以功能看起来像：

$("#btn1, #btn2").click(function() {
    var targetBlockId = $(this).attr("data-target");
    var targetBlock = $(targetBlockId);
    // do what you want with your span 'targetBlock'
})

原始答案：

我不确定你要做什么，但要选择很多要突出显示的元素你需要将它们传递给jQuery函数$('#idOfFirstBlock, #idOfSecondBlock')然后调用任何你想要的东西，例如

$('#idOfFirstBlock, #idOfSecondBlock').each(function(){ /* some actions*/})

它将应用于满足传递给jQuery的id / class names / tag名称等的每个元素。 要从each函数获取指向当前元素的指针，您可以简单地使用$(this)或检查文档并查找函数中传递的参数，其中一个将是目标元素（我认为第3或第1，但不记得确切）。

在您的示例中，您将添加click事件侦听器，它只是按类名选择某个元素而不执行任何操作。

此外，我不认为你需要这个，但为了突出更好的方式它使用一些定义了一些颜色的CSS类.highlight {background-color: red;}然后将它应用于你想要突出显示的每个元素，如我所描述的上面（使用$('...').addClass('class-name') 。如果你需要选择文本的某些部分 - 用这个类将这部分文本包装成一些标签。

Answer 2

尝试替换为：

<code id="maincode" data-target="#text1"><span id="text1">test</span></code>
<code id="secondcode" data-target="#text2"><span id="text2">test</span></code>

<script type="text/javascript">
$('#maincode, #secondcode').click(function(){
    var span = $($(this).attr("data-target")), sel, range;

if(window.getSelection){
    sel = window.getSelection();
    range = document.createRange();

    range.selectNode(span);
    sel.removeAllRanges();
    sel.addRange(range);
 } else {
    range = document.body.createTextRange();
    range.moveToElementText(span);
    range.select()
 }
});
</script>

Answer 3

我最终使用了

<script type="text/javascript">
$('.select').click(function (){
    var range, selection;

    if (window.getSelection && document.createRange) {
        selection = window.getSelection();
        range = document.createRange();
        range.selectNodeContents(this);
        selection.removeAllRanges();
        selection.addRange(range);
    } else if (document.selection && document.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(this);
        range.select();
    }
});
</script>

谢谢@reconnect和@J。 Do !!