Question

我有来自小提琴的这个剧本：http://jsfiddle.net/83T7U/5/。它会更改“回复”中的按钮名称。引用＆＃39;引用＆＃39;在特定DIV中选择某些文本时。但是，它仅适用于明文（即没有任何span，粗体，斜体等标签）。

我想更改此脚本，以便它也适用于HTML标记。因此，需要更改方法，最简单的方法是定位按钮，而不是DIV中的父/子文本。

所以我创建了一个新脚本（但它还没有完成）：http://jsfiddle.net/c8UbV/应该更改按钮名称的回复＆＃39;引用＆＃39;引用＆＃39;一旦DIV中的文本突出显示（并在文本未突出显示时将其更改回“答复”）。但它不起作用（因为它不完整......）。怎么能让它正常工作？

HTML ：

<div id="m2560" class="yellow">DIV1: First <span style="color:red">some red text for</span> you to select
<br>
<button id="msg2560">Reply</button>
</div>
<br>
    <div id="m2900" class="green">DIV2: <b>Second some bold</b> test text for you to select
<br>
<button id="m2900">Reply</button>
</div>
<br>
    <div id="msg3022" class="blue">DIV3: <i>Third some italic test</i> text for you to select
<br>
<button id="msg3022">Reply</button>
</div>

JavaScript的：

function changeButton() {
// for now this script only checks if text is selected
    var text = "";
    if (typeof window.getSelection != "undefined") {
//? it should probably be document.GetElementById('button_id').innerHTML='Quote';
    } else if (typeof document.selection != "undefined" && document.selection.type == "Text") {
//? it should probably be document.GetElementById('button_id').innerHTML='Quote';
    }
    return text;
}   
    document.GetElementById('msg***').onclick = changeButton;

Answer 1

你原来的剧本并不遥远。我建议使用

一个function that gets the selected text，以便您可以检查选择是否为空
a function that gets you the container element of the selection
a function that checks whether an element has a particular class和
一个函数，它使用特定类（下面）获取节点（或节点本身）的最近容器。

生成的代码比您所拥有的代码长，但更符合逻辑，模块化和可读性。

此外，它是document.getElementById()而不是document.GetElementById()。

演示：http://jsfiddle.net/9zXg6/6/

代码未包含在链接的答案中：

function getSelfOrAncestorWithClass(node, theClass) {
    while (node) {
        if (hasClass(node, theClass)) {
            return node;
        } else {
            node = node.parentNode;
        }
    }
    return null;
}

在DIV中选择文本，在文本突出显示时更改按钮（取消选择未突出显示时）

1 个答案: