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文章均为原创,转载请以链接形式标明本文地址
本文地址: https://zww.me/archives/25284

141 comments

  1. BoKeam BoKeam Google Chrome 7 Google Chrome 7 Windows 7 Windows 7

    占沙发

    沙发
  2. BoKeam BoKeam Google Chrome 7 Google Chrome 7 Windows 7 Windows 7

    速度好快 :shock: 看看代码

    板凳
  3. 哲哲 哲哲 Firefox 3 Firefox 3 Windows 7 Windows 7

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

    地板
  4. ......
  5. 风小 风小 Firefox 3 Firefox 3 Windows XP Windows XP

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

    41楼
    • zwwooooo zwwooooo Google Chrome 5 Google Chrome 5 Windows 7 Windows 7

      @风小 jQ很有趣很强大

    • 默玉 默玉 Maxthon 3 Maxthon 3 Windows XP Windows XP

      @zwwooooo
      博主很强大,收藏你博客了

    • layouswitch layouswitch Google Chrome 9 Google Chrome 9 Mac OS X 10.6 Mac OS X 10.6

      @风小

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

      测试下表情能引用不 我的不可以

    • zwwooooo zwwooooo Firefox 3 Firefox 3 Windows 7 Windows 7

      @layouswitch
      看来是不行,我没注意这个,貌似不太需要,连引用都很少人用。

    • coreldraw插件 coreldraw插件 TheWorld Browser TheWorld Browser Windows XP Windows XP

      @zwwooooo

      zwwooooo: 看来是不行,我没注意这个,貌似不太需要,连引用都很少人用。

      测试一下引用

    • crazy crazy Google Chrome 16 Google Chrome 16 Windows 7 Windows 7

      @coreldraw插件

      coreldraw插件:

      zwwooooo: 看来是不行,我没注意这个,貌似不太需要,连引用都很少人用。
      测试一下引用

      测试看看。。。。

  6. 园子 园子 Firefox 3 Firefox 3 Windows XP Windows XP

    没时间折腾这个了
    呵呵。

    42楼
  7. 有点蓝 有点蓝 TheWorld Browser TheWorld Browser Windows XP Windows XP

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

    43楼
  8. 小邪 小邪 Google Chrome 6 Google Chrome 6 Windows XP Windows XP

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

    44楼
  9. qiumu qiumu Firefox 4 Firefox 4 Windows 7 Windows 7

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

    46楼
    • zwwooooo zwwooooo Namoroka 3 Namoroka 3 Windows 7 Windows 7

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

  10. 主角 主角 Google Chrome 16 Google Chrome 16 Windows XP Windows XP

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

    47楼
  11. emric emric Google Chrome 18 Google Chrome 18 Windows Server 2003 Windows Server 2003
    <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 Firefox 11 Firefox 11 Windows 7 Windows 7

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

    • emric emric Google Chrome 18 Google Chrome 18 Windows Server 2003 Windows Server 2003

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

    • zwwooooo zwwooooo Firefox 11 Firefox 11 Windows 7 Windows 7

      @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 Google Chrome 18 Google Chrome 18 Windows Server 2003 Windows Server 2003

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

    • zwwooooo zwwooooo Firefox 11 Firefox 11 Windows 7 Windows 7

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

    • emric emric Google Chrome 18 Google Chrome 18 Windows Server 2003 Windows Server 2003

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

    • emric emric Google Chrome 18 Google Chrome 18 Windows Server 2003 Windows Server 2003

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

  12. SEV SEV Google Chrome 26 Google Chrome 26 Windows 8 Windows 8

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

    49楼

Leave a Reply