我已经使用这个脚本通过单击一次来突出显示一些文本
<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>
最佳答案
更新 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')
。如果你需要选择文本的某些部分 - 换行将这部分文本放入带有此类的标签中。
关于Javascript 创建范围。如何只用一个脚本选择不同的跨度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47830747/