💻 代码预览 · 小草萌猫社区

1// 小草萌猫社区 · 交互逻辑
2document.addEventListener('click', function (e) {
3  var t = e.target.closest('[data-toast]');
4  if (t) { toast(t.getAttribute('data-toast')); }
5  var cmt = e.target.closest('.cmt-tabs a');
6  if (cmt) {
7    var wrap = cmt.parentElement;
8    [].forEach.call(wrap.children, function (x) { x.classList.remove('active'); });
9    cmt.classList.add('active');
10    var type = cmt.textContent;
11    var posts = document.querySelectorAll('.post-card');
12    [].forEach.call(posts, function (p) {
13      var tt = p.querySelector('.pc-type').textContent;
14      if (type === '全部') { p.style.display = 'block'; }
15      else if (type === '晒猫日记') { p.style.display = (tt === '晒猫' || tt === '日记') ? 'block' : 'none'; }
16      else if (type === '求助问答') { p.style.display = (tt === '求助') ? 'block' : 'none'; }
17      else if (type === '领养') { p.style.display = (tt === '领养') ? 'block' : 'none'; }
18    });
19  }
20  var kc = e.target.closest('.know-cat .kc');
21  if (kc) {
22    var w = kc.parentElement;
23    [].forEach.call(w.children, function (x) { x.classList.remove('sel'); });
24    kc.classList.add('sel');
25    renderArticles(kc.textContent);
26  }
27  var like = e.target.closest('.like-btn');
28  if (like) {
29    var n = like.querySelector('b');
30    var cur = parseInt(n.textContent);
31    if (like.getAttribute('data-on') === '1') { n.textContent = cur - 1; like.setAttribute('data-on','0'); like.style.color=''; }
32    else { n.textContent = cur + 1; like.setAttribute('data-on','1'); like.style.color='#db2777'; }
33  }
34  var feed = e.target.closest('.lc-feed');
35  if (feed) { feed.textContent = '已投喂🐟'; toast('投喂成功，主播喵了一声～'); }
36});
37function toast(msg) {
38  var d = document.createElement('div');
39  d.style.cssText = 'position:fixed;left:50%;bottom:110px;transform:translateX(-50%);background:rgba(131,24,67,.92);color:#fff;padding:10px 20px;border-radius:20px;font-size:13px;z-index:999';
40  d.textContent = msg;
41  document.body.appendChild(d);
42  setTimeout(function () { d.remove(); }, 1800);
43}
44function renderArticles(cat) {
45  var list = document.getElementById('artList');
46  if (!list) return;
47  var h = '';
48  window.DATA.knowledge.filter(function (a) { return cat === '全部' || a.cat === cat; }).forEach(function (a) {
49    h += '<div class="art-card"><div class="art-emoji">' + a.emoji + '</div><div class="art-body"><div class="art-title">' + a.title + '</div><div class="art-meta">' + a.meta + '</div></div></div>';
50  });
51  list.innerHTML = h;
52}
53document.addEventListener('DOMContentLoaded', function () {
54  if (document.getElementById('artList')) { renderArticles('全部'); }
55});
56