• 注册
  • DZ代码
  • 今日 0
  • 帖子 15
  • 关注 0
  • DZ代码 DZ代码 关注:0 内容:15

    巧利用 jQuery 的 replaceWith 批量修改模板相同内容

  • 查看作者
  • 打赏作者
  • 拉黑名单
    • DZ代码
    • Lv.16
      无极会员
      中国加油

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

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

      示例二:

      jQuery('h2.bbda').replaceWith(
      jQuery('#Home_Info')
      );

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

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

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

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

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

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

      请登录之后再进行评论

      登录
    • 做任务
    • 实时动态
    • 偏好设置
    • 返回顶部
    • 帖子间隔 侧栏位置: