【jQuery】根据关键词替换图片地址

导航

侧边栏

最新评论

广树管理员

2025-04-15 22:53

@小彦：所以文本转成json啊，然后递归渲染，数据都在json里了还不好办

小彦

2025-04-15 22:49

@广树：数据取出不是难点，难的是你的卡片组件，是vue组件来的（例如），但是日志内容是全文字数据，怎么让一个日志内容里还能渲染卡片组件呢？因为vue的组件必须是写在 template里的，不能说日志里有vue的代码他就能渲染出来

广树管理员

2025-04-15 22:44

@小彦：真要硬做也不是不可以，服务器先对文本做预处理比如md转json或者html转json或者干脆数据库就存json，然后从json拿到所有涉及到的番剧id再从数据库里拿到id填充回json里。接下来前端只用针对这个json做递归渲染就行了。

小彦

2025-04-15 22:40

@广树：果然是这样，一般的思路也是这样。有个难题是，如果要求卡片和日志的文字混排呢？例如用自定义 markdown 语法，如 #card# 之类的和文字混排，能做到么

广树管理员

2025-04-15 22:14

@小彦：这个啊，首先数据库里要有个番剧表，然后把番剧和文章做关联就有了数据。前端的话做一个通用组件复用渲染就行了。

攻略中

【jQuery】根据关键词替换图片地址

作者：广树时间：2016-02-12 20:15:25分类：JavaScript

HTML部分：

<div class="abb">
<p class="p">晴</p>
<img alt="" src="" class="img"/>

<p class="p">雨</p>
<img alt="" src="" class="img"/>

<p class="p">晴</p>
<img alt="" src="" class="img"/>

<p class="p">雨转多云</p>
<img alt="" src="" class="img"/>
</div>

JS部分：

<script>
var p = $('.abb .p').filter(function(index) {
  return $(this).text().indexOf('雨') >= 0;
})
var pb = $('.abb .p').filter(function(index) {
  return $(this).text().indexOf('晴') >= 0;
})
$(p).next().attr("src","http://img.tianqi.com/static/images/tianqi/b1.png")
$(pb).next().attr("src","http://img.tianqi.com/static/images/tianqi/b0.png")
</script>

说明：

使用.filter来筛选出含有关键词“雨”或者“晴”的元素。然后对应关键词替换标签下面img标签的图片地址。