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 !!