如何更正这个错误的jquery代码？

tquggr8v 于 2021-09-23 发布在 Java

关注(0)|答案(3)|浏览(193)

我这里有一段代码。我想将文本中选定的单词更改为粗体、意大利语或带下划线的文本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div>
<p>Try to select this text.</p>
</div>
<input id="changeColor" type="button" value="Bold" />
<button id="changeItallics">Italics</button>
<button id="changeUnderline">Underline</button>
<script>
function selectHTML() {
    try {
        if (window.ActiveXObject) {
            var c = document.selection.createRange();
            return c.htmlText;
     }

        var nat = document.createElement("span");
        var w = getSelection().getRangeAt(0);
        w.surroundContents(nat);
        return nat.innerHTML;
} catch (e) {
    if (window.ActiveXObject) {
        return document.selection.createRange();
    } else {
        return getSelection();
    }
  }
}

$(function() {
    $('#changeColor').click( function() {
        var mytext = selectHTML();
        $('span').css({"font-weight":"bold"});
    });
     $('#changeItallics').click( function() {
        var mytext1 = selectHTML();
        $('span').css({"font-style": "italic"});
});
     $('#changeUnderline').click( function() {
        var mytext2 = selectHTML();
        $('span').css({"text-decoration": "underline"});
    });
});
</script>

但是，每当我单击粗体、斜体或下划线按钮时，先前选择的字母也会被转换。我怎样才能纠正它？我忘了什么吗？

jquery JavaScript Html css

来源：https://stackoverflow.com/questions/68473754/how-can-i-correct-this-erroneous-jquery-code

3条答案

按热度按时间

hwamh0ep1#

您的代码正在选择“全部” span 元素，使它们在应用新样式时都成为目标。
相反，您应该只针对 span 元素，其innerhtml与 selectHTML() . 像这样：

function selectHTML() {
    try {
        if (window.ActiveXObject) {
            var c = document.selection.createRange();
            return c.htmlText;
     }
        var nat = document.createElement("span");
        var w = getSelection().getRangeAt(0);
        w.surroundContents(nat);
        return nat.innerHTML;
} catch (e) {
    if (window.ActiveXObject) {
        return document.selection.createRange();
    } else {
        return getSelection();
    }
  }
}

$(function() {
    $('#changeColor').click( function() {
        var mytext = selectHTML();
        console.log($('span').toArray());
        $($('span').toArray().filter(e => e.innerHTML == mytext)[0]).css({"font-weight":"bold"});
    });
     $('#changeItallics').click( function() {
        var mytext1 = selectHTML();
        $($('span').toArray().filter(e => e.innerHTML == mytext1)[0]).css({"font-style": "italic"});
});
     $('#changeUnderline').click( function() {
        var mytext2 = selectHTML();
        $($('span').toArray().filter(e => e.innerHTML == mytext2)[0]).css({"text-decoration": "underline"});
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div>
  <p>Try to select this text.</p>
</div>
<input id="changeColor" type="button" value="Bold" />
<button id="changeItallics">Italics</button>
<button id="changeUnderline">Underline</button>

赞(0）回复(0）举报 2021-09-23

irtuqstp2#

问题是，每次单击时，它都会将样式添加到返回的内容中 $(span) . 现在，单击几下，就有了多个跨距。 $(span) 将返回集合，样式将应用于所有集合。
注意，您正在从selechtml函数返回span的innerhtml。而是返回元素并与jquery选择器一起使用它 $() 引用正确的 span 元素。
如果您想使用innerhtml，可以使用返回的值。

function selectHTML() {
    try {
        if (window.ActiveXObject) {
            var c = document.selection.createRange();
            return c.htmlText;
     }

        var nat = document.createElement("span");
        var w = getSelection().getRangeAt(0);
        w.surroundContents(nat);
        return nat;
} catch (e) {
    if (window.ActiveXObject) {
        return document.selection.createRange();
    } else {
        return getSelection();
    }
  }
}

$(function() {
    $('#changeColor').click( function() {
        var mytext = selectHTML();
       //var myTextInnerHTML = mytext.innerHTML; 
       $(mytext).css({"font-weight":"bold"});
    });
     $('#changeItallics').click( function() {
        var mytext1 = selectHTML();
        $(mytext1).css({"font-style": "italic"});
});
     $('#changeUnderline').click( function() {
        var mytext2 = selectHTML();
        $(mytext2).css({"text-decoration": "underline"});
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div>
<p>Try to select this text.</p>
</div>
<input id="changeColor" type="button" value="Bold" />
<button id="changeItallics">Italics</button>
<button id="changeUnderline">Underline</button>

赞(0）回复(0）举报 2021-09-23

wko9yo5t3#

以粗体为例，您的代码是这样的：获取所选文本。对所选文本不执行任何操作。然后，对于所有span标记，将font-weight css属性设置为粗体。
我没有看到所列代码的任何span标记。

赞(0）回复(0）举报 2021-09-23