Old

点击生成评论引用的jQuery代码

题外话:这几天一直在折腾Ajax评论提交,走了一个大圈还是回到了原点:willin的Ajax评论提交方式。不过算是了解了,可以自己升级修改了,精简了一些不必要的功能加快评论速度,再改改一些效果……麻烦大家继续测试ing

好,进入正题:这篇文章所说的内容其实对于熟悉jQuery的朋友来说非常简单,但因为有人要,就贴出来,顺便解决一下即将来临的文囧。

前提

1. 挂 jQuery 库,如果没有挂就把下面的js调用扔到 header.php 里面的 <?php wp_head() ?> 前面

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

2. 使用标准的评论结构,参考 WordPress 官方 http://codex.wordpress.org/Function_Reference/wp_list_comments 的 Examples 部分

准备

在functions.php找到主题的回调函数,找到类似下面的

<div class="reply">
	<?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
</div>

复制一份稍微修改一下,变成如下

<div class="reply">
	<?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
</div>
<div class="quote">
	<?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
</div>

注:你可能还需要修改 quote 显示样式css,最简单的就是在 .reply 上加上一个 .quote,自个折腾

jQuery代码:(把下面的添加到你的js文件或者直接加到footer.php的<?php wp_foot() ?>后面,用<script type="text/javascript"></script>引用)

2010.8.28 Edit)漏一句jQ代码,为复制的reply按钮文字换为“quote”

//评论引用 by zwwooooo
jQuery(".quote a").text("quote");//替换复制的reply按钮文字为quote
jQuery('.quote').click(function() {
	var atname = jQuery(this).parent().find('cite:first').text();//获得作者名称
	var quotecontent = jQuery(this).parent().find('.comment-content:first').html();//获得评论内容
	jQuery("#comment").attr("value","<blockquote><strong>" + atname + ": </strong>" + quotecontent + "</blockquote>\n").focus();//组合成引用
});

如果你要带@xxx的就如下:

//评论引用 by zwwooooo
jQuery(".quote a").text("quote");//替换复制的reply按钮文字为quote
jQuery('.quote').click(function() {
	var atid = '"#' + jQuery(this).parent().attr("id") + '"';//获取评论ID
	var atname = jQuery(this).parent().find('cite:first').text();//获得作者名称
	var quotecontent = jQuery(this).parent().find('.comment-content:first').html();//获得评论内容
	jQuery("#comment").attr("value","<a href=" + atid + ">@" + atname + " </a>\n" + "<blockquote><strong>" + atname + ": </strong>" + quotecontent + "</blockquote>\n").focus();//组合成引用
});

有些主题比较特殊,也就是说自定义了评论结构,那么就要根据自个主题修改 jQ 选择器了,不懂可以翻翻 jQuery 手册。

就这样,有兴趣的慢慢折腾。

zww
or
oooo

声明: 除非注明,ZWWoOoOo文章均为原创,转载请以链接形式标明本文地址
本文地址: http://zww.me/archives/25284

141 comments

  1. BoKeam BoKeam

    占沙发

    沙发
  2. BoKeam BoKeam

    速度好快 :shock: 看看代码

    板凳
  3. 哲哲 哲哲

    从twitter过来的·不过有点慢了··

    地板
  4. ......
  5. 风小 风小

    :smile: 很不错,我也要多学学jQuery了。。

    41楼
  6. 园子 园子

    没时间折腾这个了
    呵呵。

    42楼
  7. 有点蓝 有点蓝

    会是什么效果呢? 测试一下。

    43楼
  8. 小邪 小邪

    唔,如果无限嵌套的时候顺序乱掉了,倒是必须的呢 ~

    44楼
  9. qiumu qiumu

    :evil: 我怎么弄都不行,不知道为什么。

    46楼
    • zwwooooo zwwooooo

      @qiumu
      这个要懂点jQuery才行,或者你的主题用的评论结构跟默认主题一样。

  10. 主角 主角

    正在寻找完美的解决方法,能够即时显示GRAVATAR头像。

    47楼
  11. emric emric
    <div id="comment-2" class="comment-body">
    <div class="comment-author"><img alt="" src="" class="avatar avatar-28 photo" ></div>
    <div class="comment-head">
    <span class="name">emric</span>
    <div class="date">四月 13, 2012 18:33:18 #1</div>
    </div>
    <div class="comment-entry">
    <div class="comment-text">
    <p>测试测试</p>
    </div>
    <div class="comment-reply"><a class="comment-reply-link" href="" onclick="">@</a></div>
    </div>
    </div>

    评论样式素这个, 我真的没辙了 TAT,木会JS

    48楼
    • zwwooooo zwwooooo

      @emric
      你这结构肯定不能直接使用文章中的代码,我文中好像说了,评论结构要跟 WP 官方的那种结构相同才能直接套用,不然就要自己根据自己的评论结构修改 jQuery 代码。

    • emric emric

      @zwwooooo
      改了好几次吧,就素获取不到ID, 和名字,

    • zwwooooo zwwooooo

      @emric
      假定你在(这是根据你评论提供的结构复制的)

      <div class="comment-reply"><a class="comment-reply-link" href="" onclick="">@</a></div>

      后面复制了一份回复按钮为如下

      <div class="comment-reply quote"><a class="comment-reply-link" href="" onclick="">@</a></div>

      然后你试试修改过的jQ:

      jQuery(".quote a").text("quote");//替换复制的reply按钮文字为quote
      jQuery('.quote').click(function() {
      	var atid = '"#' + jQuery(this).parent().parent().attr("id") + '"';//获取评论ID
      	var atname = jQuery(this).parent().parent().find('.name:first').text();//获得作者名称
      	var quotecontent = jQuery(this).parent().find('.comment-text:first').html();//获得评论内容
      	jQuery("#comment").attr("value","<a href=" + atid + ">@" + atname + " </a>\n" + "<blockquote><strong>" + atname + ": </strong>" + quotecontent + "</blockquote>\n").focus();//组合成引用
      });
    • emric emric

      @zwwooooo
      TAT, 成功了, ZWO 大叔素好淫,好淫,

    • zwwooooo zwwooooo

      @emric
      好淫难做,好淫吃亏。共享精神+刚好有时间罢了 :grin:

    • emric emric

      @zwwooooo
      很猥琐的说肿么去掉IMG这些标签呢?unwrap()? :grin:

    • emric emric

      @zwwooooo
      找到了 =v = 素text()

  12. SEV SEV

    问题是二级后的评论引用,把@xx和链接给引用进去了,怎么办排除呢?

    49楼

Leave a Reply