Question

我想隐藏一个简单div中包含的某些字符的所有实例基本上我所追求的是，当页面加载某些字符时（在这个例子中's'和'e'）将淡出并在句子中留下字符所在的空格。
到目前为止，这是迄今为止： HTML：
<div id="test">hello this is a test this is a test</div>
jQuery的：

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

这也是一个有效的jsFiddle：http://jsfiddle.net/6vjt3/
但这一切都是在句子中隐藏第一个's'和'e'，而不是其余部分我希望发生的事情是，jQuery会检测到这些字母并慢慢将它们淡化为白色，因此留下与字母成比例的空格，但根本无法弄清楚如何做到这一点。
任何建议都会很棒！

Answer 1

如果您稍后需要返回原始数据，我建议采用这种方法：

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;
}

Answer 2

我试图按照你提到的那样淡出它..参见 DEMO http://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（全局）的regEx ..见下文，

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

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

Answer 3

您需要将这些字符包装在SPAN中，然后淡出SPAN。使用替换将立即消除它们，但永远不会淡出。

隐藏div中的某些字符

3 个答案: