Javascript 创建范围。如何只用一个脚本 select 不同的 span？

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：

单击其中的 span select 文本。我使用 classes 而不是 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 个不同的块中 selecting，你只需要在每个按钮上指定一些属性，这将包含有关 selection 块的信息，例如按钮和块：

<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'
})

原回答：

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

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

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

在您的示例中，您添加的点击事件侦听器只是 select 某些名称为 class 的元素，而不执行任何操作。

此外，我认为您不需要这个，但是为了突出显示更好的方法，它使用一些 CSS class 来定义一些颜色 .highlight {background-color: red;} 并将其应用于每个如上所述，您想要突出显示的元素（classes 应用于 $('...').addClass('class-name')。如果您需要 select 文本的某些部分 - 使用此 [=42] 将这部分文本包装到某个标签中=].

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。母鹿!!

Javascript 创建范围。如何只用一个脚本 select 不同的 span？

Javascript createRange. How to select different spans with only one script?

javascript

click

highlighting

selection