在div中隱藏某些字符

我正在尋找隱藏簡單div中包含的某些字符的所有實例。
基本上我所追求的是，當頁面加載某些字符（在這個例子中的'和'e'）將淡出，並留下空間的角色將在原來的句子。
這是據我已經走到這一步：
HTML：
<div id="test">hello this is a test this is a test</div>
的jQuery：
在div中隱藏某些字符

$(document).ready(function(){ 
$('#test').html($('#test').html().replace("s"," ")); 
$('#test').html($('#test').html().replace("e"," ")); 
});

這裏有一個工作的jsfiddle太：http://jsfiddle.net/6vjt3/
但是這一切正在做的是隱藏第一個'和'e'在句子中，而不是其他的。
最好是我想要發生的事情是，jQuery會檢測到這些字母，並慢慢淡化它們爲白色，因此留下一個與字母成比例的空間，但不知道如何做到這一點。
任何建議將是偉大的！

來源

2012-12-04 user1374796

http://davidwalsh.name/javascript-replace這應該幫助... –

我試着做，因爲你提到的衰落出來..見DEMOhttp://jsfiddle.net/6vjt3/3/

全碼：

$(document).ready(function(){ 
    var charToReplace = ['s', 'e']; 
    $('#test').html(function (i, v) { 
     var resultStr = ''; 
     for (var i = 0; i < v.length; i++) { 
      var ch = v.charAt(i); 

      if ($.inArray(ch, charToReplace) >= 0) { 
       resultStr += '<span class="hideMe">' + ch + '</span>'; 
      } else { 
       resultStr += ch; 
      } 
     } 

     return resultStr; 
    }).find('.hideMe').fadeOut(1000, function() { 
     $(this).css('opacity', 0).show();    
    }); 

    //lets bring it all back 
    setTimeout(function() { 
     $('#test').find('.hideMe').css('opacity', 1); 
    }, 5000); 
});

使用表達式與g（全球）上取代。請參見

$('#test').html($('#test').html().replace(/s/g," ")); 
$('#test').html($('#test').html().replace(/e/g," "));

DEMO：http://jsfiddle.net/6vjt3/1/

來源

2012-12-04 20:48:46

這段代碼很好，實際上完美！一個小問題，但由於某些原因使用此代碼後，它不再在div內實現標籤，是否有這樣的理由？ – user1374796

+0

@ user1374796用'
'發表示例文本，我會研究它。 –

+0

我已經弄清楚了，但由於某種原因，當我將代碼移到我的服務器上時，它根本無法工作？ http://www.nealfletcher.co.uk/fish/test/test不知道爲什麼 – user1374796

1

您需要將這些字符封裝在SPAN中，然後淡出SPAN。使用替換會立即擺脫它們，但永遠不會淡出。

來源

2012-12-04 20:49:17

2

如果以後需要回到原來的數據，我建議這種做法：

var $hiddenElement = $('<span>').addClass('hidden'); $('#test').html($('#test').html().replace(/s/g, $hiddenElement.text(s))); $('#test').html($('#test').html().replace(/e/g, $hiddenElement.text(s)));

你的CSS

.hidden { display: none; }

來源

2012-12-04 20:57:25 antonjs

在div中隱藏某些字符

回答

相關問題