jquery 从 html() 替换字符串答案

【问题标题】：jquery replace string from html()jquery 从 html() 替换字符串
【发布时间】：2012-03-01 04:08:01
【问题描述】：

我正在尝试替换以下代码中的 CSS 样式：

var theHTML = this.html();
theHTML.replace("style=\"display:none;\"", "style=\"display:inline;\"");
alert(theHTML);

html 看起来像这样：

<IMG SRC="picturesFromServer.asp?PhotoId=365481" style="display:none;">

但是，一旦我检查它是否更改了它，它会一直显示无而不是内联。我只是想在打印之前让它可见。

【问题讨论】：

为什么 HTML 首先有style="display:none;"？
@Madmartigan：对用户隐藏图像。然后打印出来。提示这就是为什么我想在打印之前显示它。

标签： javascript jquery css str-replace

【解决方案1】：

您可以使用 JQuery 的 .css() 方法：

$("img").css("display","inline");

【讨论】：

意思 this.html().css("display","inline");?
@StealthRT this=> $("img") 将选择所有图像标签。你可以给你的图片标签一些 id，比如说<img id='target' .. 然后你可以使用$("#target") 来选择那个图片。您是否要定位整个文档中的所有图像或所有标签？

【解决方案2】：

编辑：如果您想要完成的是，在this 中获取img 标记并将其附加到其他位置，使用display:none; 执行此操作。

http://jsfiddle.net/tL3Uf/

HTML

<div id="mainContainer">
    <img src="http://imgh.us/business-online.jpg" style="display:none;" /> </div>

<div id="destination"></div>

Javascript

$(function(){
    var $img = $("#mainContainer img").clone();
    $img.show(0).appendTo('#destination');
});

CSS

#incase image doesnt load

img{
  padding: 10px;
  background: #f00;        
}

【讨论】：

这是一个糟糕的解决方案，首先进行字符串替换。
恐怕没用。 B. VB 的建议确实有效，但打印出来时没有显示图像。
@StealthRT 我编辑了我的回答。现在可以了。检查小提琴

【解决方案3】：

我真的不是 jQuery 大师，但在 Javascript 中字符串是不可变的吗？你应该尝试类似的东西

theHtml = theHtml.replace(...)

【讨论】：

那行得通，但是当我打印出来时它没有图像，所以它仍然隐藏：o(

【解决方案4】：

用这行替换给定代码的前两行：

$(this).find("img").css("display","inline");

【讨论】：

html 包含一个图像标签，并且您想更改该标签的显示...我建议使用 .css() 而不是字符串替换。
我同意。这是完成显示图像的最佳方式，利用了 jQuery 的优势。

【解决方案5】：

字符串.replace() method 不会更新您调用它的字符串，它会返回一个新字符串 - 这就是您的alert(theHTML) 继续显示原始字符串的原因。如果你这样说：

theHTML = theHTML.replace("style=\"display:none;\"", "style=\"display:inline;\"")

然后alert(theHTML) 将显示替换的版本。

但是，这仍然不会对实际的 img 元素产生任何影响，因为它仍然只是对与您的元素无关的字符串变量的操作。要真正使 img 元素可见，您必须用从字符串生成的新元素替换它，这很麻烦，或者您可以直接设置 display 属性：

$(this).css("display", "inline");

还请注意，您的原始代码说 this.html() - this 似乎不太可能是您可以调用 jQuery .html() 方法的 jQuery 对象，它更有可能是 DOM 元素本身，其中如果你需要说$(this).html()。因此，如果任何答案都不起作用，则可能与您首先如何获得对 img 元素的 this 引用有关 - 如果您可以更新您的问题以显示这一点，可能会有所帮助。

还要注意，如果这里的想法是让 img 元素出现在打印输出中，但不是其他情况，您可以使用 CSS 来做到这一点：

@media all {
   img.printOnly { display: none; }
}
@media print {
   img.printOnly { display: inline; }
}

将“printOnly”类（或您想要使用的任何类名）赋予任何应仅用于打印的元素。或通过 id 指定。随便。

【讨论】：