Javascript createRange. Wie wählt man verschiedene Bereiche mit nur einem Skript aus?

Question

Ich habe dieses Skript verwenden, um einen Text, indem Sie auf ein einziges Mal

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

hervorgehoben zu erhalten, die mit einem Codeblock angewandt wird:

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

Wie kann ich dieses Skript verwenden, um mehrere Codeblocks markieren ohne das Skript immer wieder mit neuen IDs zu kopieren? Ein weiterer Codeblock wie folgt sein könnte:

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

Ich habe versucht, es auf diese Weise ein nicht getan:

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

Danke Jungs!

EDIT:

<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

Update 3:

Bei einem Klick auf die Spanne wählen Sie Text darin. Ich habe Klassen statt ID benutzt.

<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(); 
}) 

als Antwort Hinzugefügt Kommentare

Wenn yo 2 verschiedene Tasten für die Auswahl von 2 verschiedenen Blöcken verwenden möchten Sie einfach auf die brauchen jede Taste einige Attribute angeben, die Daten zu Block zur Selektion enthalten wird, für Beispiel Knöpfe und Blöcke:

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

so wird Funktion aussehen wie:

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

Ursprüngliche Antwort:

Ich bin nicht sicher, was Sie zu tun versuchen, aber um eine Menge von Elementen für die Hervorhebung auszuwählen, müssen Sie sie nur in jQuery-Funktion $('#idOfFirstBlock, #idOfSecondBlock') übergeben und dann alles aufrufen, was Sie wollen, zum Beispiel

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

wird es für jedes Element anwenden, das genügt, um ids/Klassennamen/Tag-Name und etc in jQuery übergeben. Um den Zeiger auf das aktuelle Element von each Funktion zu bekommen, können Sie einfach $(this) oder überprüfen Sie die Dokumentation und finden Sie, welche Argumente in der Funktion passiert, einer von ihnen wird Zielelement sein (ich nehme an, dass 3. oder 1., aber nicht genau erinnern).

In Ihrem Beispiel fügen Sie einen Klick-Ereignis-Listener hinzu, der nur ein Element nach Klassennamen auswählt und nichts tut.

Darüber hinaus denke ich nicht, dass Sie dies benötigen, aber für die Hervorhebung besser Weg, es ist einige CSS-Klasse verwenden, die einige Farbe .highlight {background-color: red;} definieren und dann auf jedes Element anwenden, wie oben beschrieben (Klassen angewendet mit $('...').addClass('class-name'). Wenn Sie einen Teil des Textes auswählen müssen, wickeln Sie diesen Teil des Textes in ein Tag mit dieser Klasse.

Answer 2

Versuchen Sie, mit ersetzen:

<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

I

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

Dank @reconnect & @J mit endete. Doe !!