不串聯使用類內容的jQuery

jQuery的小白這裏（不要大多數帖子開始喜歡嗎？）不串聯使用類內容的jQuery

我知道我可以用CSS單獨做到這一點然而，只是爲了讓經驗多一點的觸覺，我試圖編寫一個jQuery「spoiler」函數，如果它適當標記並在鼠標懸停中顯示，就會混淆頁面上的一些文本。

總的來說，這很好地工作 - 它用您選擇的一些文本替換文本，甚至匹配替換文本的寬度以阻止文本回流。問題出現在我在頁面上添加多個擾流類時 - 在這種情況下，它將每個擾流板中的文本連接起來，並且似乎與元素第一個匹配元素的寬度匹配。它基本上就像這個功能無法分辨每個擾流板之間的差異，所以它將它們放在一起。

我必須在相當基礎的層面上做錯事。有人能指出我的錯誤嗎？

<!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>

來源

2012-02-29 Doug

混淆「最簡單的方法擾流文本「只是爲了使其與背景顏色相同，並在翻轉時切換。對文本本身進行加擾看起來好像過火了。 – Blazemonger 2012-02-29 15:25:56

我同意，但這種挑剔對於我來說比一個適當的商業項目更爲挑戰。我想要達到的目的不是簡單地將混淆的文本消除，而是讓用戶能夠定義顯示的文本 - 因此，這種方式效果很好。我不知道這是不是最好的方法:)我確定一個XHTML驗證器會對我使用的一些技術尖叫我！ – Doug 2012-03-09 13:53:43

你需要把參數爲一組：

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

    return this; 
}

如果你使用的這作爲插件，基本上你已經做了你也想在文檔準備好的代碼片段。你想在它自己的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更多信息

來源

2012-02-29 15:29:38 prodigitalson

你們很棒 - 謝謝！瞭解整個每件事情 - 我知道我的方式周圍的PHP。雖然現在有點不在我的舒適區，但它已被正式注意，並希望在充滿時間的情況下更有意義。乾杯！ – Doug 2012-02-29 20:39:50

@doug：$ .extend'與PHP中關聯數組上的'array_merge'類似。 – prodigitalson 2012-02-29 21:51:34

啊，我明白了。這將允許我用不同的眼光來看待它 - 感謝prodigitalson。 – Doug 2012-03-05 17:45:59

你在操作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內部，我在每個點用el替換了this。（從技術上講，你應該能夠使用this繼續，但我覺得很困惑，當有一個以上的this左右浮動。）

來源

2012-02-29 15:29:14 Blazemonger

不串聯使用類內容的jQuery

回答

相關問題