利用 jQuery 的 replaceWith 批量修改模板相同内容-建站技术-魔趣建站-我们共同的建站资源共享平台！

利用 jQuery 的 replaceWith 批量修改模板相同内容 [复制链接]

moqu8 2017-9-8

在写模板的过程中，经常会遇到某一种样式，在多个页面反复使用的情况，可是一个文件一个文件的去修改首先浪费时间，其次不保证所有的样式都能改的到位。若有遗漏，就会导致样式不一致的尴尬局面。
我们可以通过jQuery脚本的替换内容，让浏览器自动识别被替换内容，这样就省去了很多的前端修改工作。
首先先来解读一下jQuery的替换方式：
示例一：

jQuery('h2.bbda').replaceWith('<div>替换内容</div>');

示例二：

jQuery('h2.bbda').replaceWith(
jQuery('魔趣建站')
);

示例一解读：
  h2.bbda  表示的是被替换内容的选择器实际为 <h2 class="bbda">内容</h2> 的整个h2结构。
  <div>替换内容</div> 表示的是替换内容。这里需要注意的是：在替换内容中，无法读取键盘的空格键、回车键。也就是说，这里只适合放置比较简单的结构。

示例二解读：
  h2.bbda  表示的是被替换内容的选择器实际为 <h2 class="bbda">内容</h2> 的整个h2结构。
魔趣建站表示的是替换内容。但是这里的不同之处在于，这种方式可以把一个很复杂的div结构替换进去。

以 My WBlog D1 模板为例，我需要将所有的左右分栏页面中，左侧导航部分上面的

<h2 class="mt bbda">{lang ******}</h2>

替换成一个结构非常复杂的当前登陆用户信息部分，其中还涉及到了 if 的使用。（涉及模板文件20余个）
我选择的方式是：
1.将我需要替换的内容单独写在一个新建模板页面。例如：home_info.htm
2.将home_info.htm 以  的方式写在页头的body标签下。

如果到这里就结束，那就大错特错了。做到这里，会出现一个问题。那就是：
如果当前页面包含 <h2 class="mt bbda">{lang ******}</h2> 则被替换。
如果当前页面不包含<h2 class="mt bbda">{lang ******}</h2> 则  被直接显示。
那怎么解决这个问题呢。当然是使用 style="display: none;" ，但是不是给  里面的第一层div加。因为这样会导致替换的内容也会夹带style="display: none;"。
问题解决方案：在body标签下写入的  给一个div层，给这个div层一个 style="display: none;"，这样父级被隐藏，子级就不会直接显示出来，在包含被替换内容的页面中，因为 里面的第一层div 没有被隐藏，便可以直接替换出来。