Question

我在点击处理程序中使用以下代码（如下面的JSFiddle所示），以便在用户点击单元格值时替换文本：

  var value = event.args.value;
  var color = "#FF0000";

  var highlighted = text.replace(
                ' ' + value + ' ', 
                "<span style='color:" + color + ";'</span> "
              );

  panel.jqxPanel('clearcontent');
  panel.jqxPanel('append', highlighted);

Q1：它以不同的方式表现。我的意思是当我点击第一个单元格值时，它会将所有内容转换为红色，单击其他值会使其行为方式不同，这可以在我的JSFiddle中看到here

Q2。我可以用什么来保存html格式？我的意思是使用var text = panel.html();代替var text = panel.text();并不适合我。

Answer 1

您错过了span标记上的结束>，而您忽略了从value获得的var value = event.args.value;，因此该字词丢失了。

var highlighted = text.replace(
            ' ' + value + ' ', 
            ' <span style="color:' + color + ';">' + value + '</span> '
//                                              ^    ^^^^^

注意我还更改了使用的引号字符，因此HTML可以使用双引号"，它们更常用于标记，而javascript并不关心字符串的单引号或双引号 - 使用无论你喜欢什么，只要保持一致，为了你自己的理智。

尝试我创建的updated fiddle，只更改该行，您会看到单击的单词突出显示。

也就是说，通常最好避免像color="#FF0000"这样的内联样式，而是使用类和CSS样式。相反，您可以使用更简单的代码，无需将变量color加入其中：

var highlighted = text.replace(
            ' ' + value + ' ', 
            ' <span class="selected">' + value + '</span> '

您的CSS会有一个规则span.selected { color: #FF0000; } ...然后，将您的高亮颜色从红色重新设置为其他内容，您只需更改CSS而不必更改您的JavaScript代码。

使用替换方法更改文本颜色

1 个答案: