Javascript 创建范围。如何只用一个脚本选择不同的跨度？

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 个不同的 block 中进行选择，您只需要在每个按钮上指定一些属性，该属性将包含有关 block 的信息以供选择，例如按钮和 block :

<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/类名称/标签名称等的每个元素。要从 each 函数中获取指向当前元素的指针，您可以简单地使用 $(this) 或检查文档并找到函数中传递的参数，其中一个将是目标元素(我想是第 3 或第 1，但记不太清了)。

在您的示例中，您添加了点击事件监听器，该监听器仅按类名选择一些元素而不执行任何操作。

此外，我认为您不需要这个，但是为了突出显示更好的方法，它使用一些定义了一些颜色的 CSS 类 .highlight {background-color: red;} 然后应用它到你想要突出显示的每个元素，正如我上面描述的那样(类应用 $('...').addClass('class-name')。如果你需要选择文本的某些部分 - 换行将这部分文本放入带有此类的标签中。