0

嗨，我正在尝试几个小时来在添加文本字符串后再次删除它。

我有一个处理手风琴的脚本，其中的文本有些冗余。所以我想在打开或关闭手风琴行时添加和删除多余的文本。

这是我的代码：

var redundantText = "text text text <a href=\"#contact\">Contact Me</a> text text text";

$('#collapse_1').on('show.bs.collapse', function() {
  $(".dropdown_collapse_1").addClass("dropdown-indicator");
  $(".dropdown_collapse_1").removeClass("dropdown-collapsed");
  $("#redundant_text_wrapper").append(redundantText);
});
$('#collapse_1').on('hide.bs.collapse', function() {
  $(".dropdown_collapse_1").addClass("dropdown-collapsed");
  $(".dropdown_collapse_1").removeClass("dropdown-indicator");
  $("#redundant_text_wrapper").text().replace(redundantText, '');
});

附加工作正常，但 text().replace() 没有。因此，如果我多次打开和关闭手风琴行，它总是会附加冗余文本，但从不删除它，这样冗余文本就会变得更加冗余。

编辑：将“redundantText”更改为redundantText。还是不行

编辑2：

$("#redundant_text_wrapper").text($("#redundant_text_wrapper").text().replace(redundantText,''));

也无济于事，它只会删除链接但文本仍然存在

编辑3：

$( "#redundant_text_wrapper").text(function(index, currentText) {
    return currentText.replace(redundantText,'');
});

也只删除链接，文本保留

4

4 回答 4

3

那应该是：

$( "#redundant_text_wrapper").text( $( "#redundant_text_wrapper").text().replace('redundantText','') ) ;

或者，如果您想替换所有匹配项：

$( "#redundant_text_wrapper").text( $( "#redundant_text_wrapper").text().replace(/redundantText/g,'') ) ;
于 2015-01-19T13:42:50.257 回答
2

$( "#redundant_text_wrapper").text().replace('redundantText','')只是获取文本值，替换它并且对结果不做任何事情，因此具有讽刺意味的是，这一行是多余的。

此外，由于您redundantText包含 html，您可能应该使用html()而不是text().

如果要操作元素的现有 html，则应使用html()带有函数的重载（对于 text()也有相同的功能）。这将接收元素的当前 HTML 并返回要设置的新 HTML：

$( "#redundant_text_wrapper").html(function(index, oldHtml) {
    return oldHtml.replace(redundantText,'');
});

话虽如此，替换包装器的全部内容效率较低，并且可能会破坏其内部元素上的现有事件处理程序之类的东西。我会说最好将多余的文本放入另一个元素中，例如 a <span>，然后添加和删除它（或者只是显示和隐藏它）：

// wrap it all in a <span> - give it a class to be sure
var redundantText = '<span class="redundant">text text text <a href=\"#contact\">Contact Me</a> text text text</span>';

$('#collapse_1').on('show.bs.collapse', function() {
  $(".dropdown_collapse_1").addClass("dropdown-indicator");
  $(".dropdown_collapse_1").removeClass("dropdown-collapsed");
  $("#redundant_text_wrapper").append(redundantText);
});

$('#collapse_1').on('hide.bs.collapse', function() {
  $(".dropdown_collapse_1").addClass("dropdown-collapsed");
  $(".dropdown_collapse_1").removeClass("dropdown-indicator");
  // just find the span and remove it
  $("#redundant_text_wrapper > span.redundant").remove();
});
于 2015-01-19T13:43:54.127 回答
0

改变

$( "#redundant_text_wrapper").text().replace('redundantText','');

到：

$( "#redundant_text_wrapper").text().replace(redundantText,'');

删除变量周围的引号。这样，它将被视为变量而不是字符串。

或者

$("#redundant_text_wrapper").text($("#redundant_text_wrapper").text().replace(redundantText,''));

这样，它将首先获取文本而不是替换它并设置它。

于 2015-01-19T13:42:17.530 回答
0

好的，我现在尝试了另一种方法：

var redundantText = "<span id=\"redundantText_wrapper\"> text text text <a href=\"#contact\">Contact Me</a> text text text</span>";

$('#collapse_1').on('show.bs.collapse', function() {
  $(".dropdown_collapse_1").addClass("dropdown-indicator");
  $(".dropdown_collapse_1").removeClass("dropdown-collapsed");
  $("#redundant_text_wrapper").after(redundantText);
});
$('#collapse_1').on('hide.bs.collapse', function() {
  $(".dropdown_collapse_1").addClass("dropdown-collapsed");
  $(".dropdown_collapse_1").removeClass("dropdown-indicator");
   $('#redundantText_wrapper').remove();
});

所以基本上我使用'after'而不是'append'并将文本放入带有ID的跨度中。现在我可以使用 $('#ID').remove(); 在关闭选项卡时摆脱它。

于 2015-01-19T14:45:09.930 回答