不将内容与 jQuery 中的类连接起来答案

【问题标题】：Not concatenating content with classes in jQuery不将内容与 jQuery 中的类连接起来
【发布时间】：2012-02-29 15:23:56
【问题描述】：

jQuery noob 在这里（大多数帖子不是这样开头的吗？）

我知道我可以单独使用 CSS 来做到这一点，但为了让体验更具触觉，我正在尝试编写一个 jQuery“剧透”函数，如果页面上的一些文本标记得当，它会混淆它并在鼠标悬停时显示。

总的来说，这很好用 - 它用您选择的一些文本替换文本，甚至匹配被替换文本的宽度以阻止文本重排。当我在页面上添加多个扰流器类时，问题就出现了——在这种情况下，它连接了每个扰流器中的文本，并且似乎与元素第一个匹配元素的宽度相匹配。这基本上就像函数无法区分每个扰流板之间的区别，所以它将它们放在一起。

我一定是在相当基本的层面上做错了什么。有人可以指出我的错误吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Spoiler test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    jQuery.fn.spoiler = function(spoilerReplaceText) {
        $(this).addClass('spoilerCensored');
        var spoilerText = $(this).text();
        var spoilerWidth = $(this).width();
        $(this).attr('spoilertext',spoilerText).text(spoilerReplaceText).width(spoilerWidth);
        $(this).stop().hover(
            function(){
                var spoilerText = $(this).attr('spoilertext');
                $(this).fadeOut(250,function(){
                    $(this).text(spoilerText).addClass('spoilerRevealed').removeClass('spoilerCensored').fadeIn(250);
                });
            },
            function(){
                $(this).fadeOut(250,function(){
                    $(this).text(spoilerReplaceText).removeClass('spoilerRevealed').addClass('spoilerCensored').fadeIn(250);
                });
            }
        );
    };

    $('.spoiler').spoiler("don't touch this");
});

</script>

<style type="text/css">
    .spoiler {display: inline-block;background-color: #000000;color: #000000;text-align: center;}
    .spoilerCensored {color: #ffffff;}
    .spoilerRevealed {background-color: #ffffff;color: #000000;}
</style>

</head>

<body>
<p>You can add a <span class="spoiler">spoiler to your content</span> very easily. All you need to do is <span class="spoiler">add a class called spoiler to each bit of text</span> you'd like to hide. There is a problem with <span class="spoiler">adding</span> more than one spoiler to a page though.</p>
</body>
</html>

【问题讨论】：

混淆“剧透文本”的最简单方法就是使其与背景颜色相同，并在翻转时切换。打乱文本本身似乎有点过头了。
我同意，但是这个练习对我来说更像是一个挑战，而不是一个合适的商业项目。我想要实现的不是简单地清除混淆的文本，而是让用户能够定义显示的文本——因此效果很好。不过我不知道这是否是最好的方法 :) 我确信 XHTML 验证器会因为我使用的一些技术而对我大喊大叫！

标签： jquery class selector concatenation

【解决方案1】：

您需要将参数视为一个集合：

$.fn.spoiler = function() {
   this.each(function(){
      // yur current code
   });

  return this;
}

如果您将其用作插件，这实际上就是您所做的，您也确实希望文档中的代码 sn-p 准备好。您希望它在自己的 js 文件中，该文件包含在 jquery 之后。

您可能还想添加选项/默认值：

$.fn.spoiler = function(options) {
   var o = $.extend($.fn.spoiler.defaults, options||{});

   this.each(function(){
      // yur current code
      // reference the replacement text with o.text
   });

  return this;
}

$.fn.spoiler.defaults = {
   "text": 'Spoiler Alert'
};

然后你的用法就变成了：

$(document).ready(function(){
   $('.spoiler').spoiler({
      'text': 'Custom text'
   });
});

查看plugin authoring docs 了解更多信息

【讨论】：

你们太棒了-谢谢！了解整个每件事 - 我知道我的 php 方式。虽然目前扩展的东西有点超出我的舒适区，但是它已经被适当地注意到了，希望它在时间充足时会变得更有意义。伙计们干杯！
@doug: $.extend 有点像 PHP 中关联数组上的 array_merge。
啊，我明白了。这将使我能够以不同的方式看待它 - 感谢 prodigitalson。

【解决方案2】：

您正在操作的 jQuery 对象有时是一组 DOM 元素，而您的函数同时对所有这些元素进行操作。对于像.addClass 这样的方法，这不是问题，因为它们分别对每个DOM 元素进行操作并返回修改后的jQuery 对象以进行链接。另一方面，.text 是不可链接的——它结合了它找到的所有 DOM 元素的结果并返回一个字符串。

要解决这个问题，请尝试添加一个.each 循环（未经测试）：

jQuery.fn.spoiler = function(spoilerReplaceText) {
    $(this).each(function(i,el) {
        $(el).addClass('spoilerCensored');
        var spoilerText = $(el).text();
        var spoilerWidth = $(el).width();
        ...

等等。请注意，在.each 中，我在每个点都将this 替换为el。（从技术上讲，你应该可以继续使用this，但是当有多个this 浮动时，我会感到困惑。）

【讨论】：