Question

我有一个p，里面有一些span，用于指定当我看到它时，带有动画div的文字的哪一部分加下划线，并使用{{进行检测1}}。

当所有文字在同一行但scrollTop()中的文字有换行符时我不知道如何创建span时，是否没有问题。

这是我的代码，我退出动画以简化。

＆＃13;

div

＆＃13;

	 var subrayados_offset = [];
	 var subrayados_element = [];
	 var subrayados_bg = [];
	 var subrayados_delay = 0;


	jQuery(document).ready(function(){
		$('.subrayado').each(function(index, element) {
			subrayados_offset[index] = $(this).offset().top;
			subrayados_element[index] = $(this);
			$(this).append("<div class='subrayado_bg' style='width:100%; height:100%; background-color:red; position:absolute; top: 0; left: 0; z-index:-1;'></div>");
			subrayados_bg[index] = $(this).find(".subrayado_bg");
		});
	});

			setInterval(function() {
		    	for (var i = subrayados_offset.length - 1; i >= 0; i--) {
		    		var sub_obj = subrayados_bg[i];
		    	//console.log(subrayados_bg[i]+" "+jQuery(window).scrollTop()+" "+puntoDesplegar);

		    		if (jQuery(window).scrollTop() >= subrayados_offset[i]-400 && jQuery(window).scrollTop() < subrayados_offset[i]) {
		    			//TweenMax.killTweensOf(sub_obj);
						//TweenMax.to(sub_obj, 0.5, {delay:subrayados_delay, width:"100%", ease:Power4.easeInOut});
		    		}
		    		else{
		    			//TweenMax.killTweensOf(sub_obj);
		    			//TweenMax.to(sub_obj, 0.5, {delay:subrayados_delay, width:"0%", ease:Power4.easeInOut});
		    		}
		    		subrayados_delay += 0.1;
		    	}
		    	subrayados_delay = 0;
				   	
			}, 500);

＆＃13;

p{width: 300px;}
.subrayado{ position: relative; }

＆＃13;

我尝试使用RegExp选择换行符，但我不知道正确的查询。

Answer 1

要使用@Max Starkenburg提供的link在换行后创建span，这是我写的代码：

if(current.text(current.text() + ' ' + words[i]).height() > height){
    current.text(current.text().split(words[i])[0] + '</span> <span class="subrayar">' + words[i]);
    height = current.height();
}

有了这个，在添加新单词后，我会检测到高度，如果它更大（在下一行），我会拆分这个单词并再次添加它，但是会写span个标签。

在下面的代码段中，您可以看到所有代码。

我添加了一个类来显示span何时在下一行。

var subrayados_offset = [];
	 var subrayados_element = [];
	 var subrayados_bg = [];


	jQuery(document).ready(function(){
		$('.subrayado').each(function(index, element) {
			var current = $(this);
		    var text = current.text();
		    
		    var words = text.split(' ');
		    
		    current.text(words[0]);
		    var height = current.height();
		    
		    for(var i = 0; i < words.length; i++){
		    	//console.log(height+" "+words[i]+" "+current.height()+" "+words[i+1]);
	        	if (i == 0) {
    				current.text(words[0]);
    			}
    			else{
    				if(current.text(current.text() + ' ' + words[i]).height() > height){
    					console.log(current.text().split(words[i])[0]);
			            current.text(current.text().split(words[i])[0] + '</span> <span class="subrayar other_span">' + words[i]);
			            height = current.height();
		    			
			        }		        		
    			}  
		    }
		    
		    $(this).html('<span class="subrayar">'+current.text()+'</span>');

			//$(this).html($(this).text().replace(/(\w+|\S+)/g, '</span>$1<span class="subrayado">'));
		});

		$('.subrayar').each(function(index, element) {
			subrayados_offset[index] = $(this).offset().top;
			subrayados_element[index] = $(this);
			$(this).append("<div class='subrayado_bg' style='width:100%; height:100%; background-color:red; position:absolute; top: 0; left: 0; z-index:-1;'></div>");
			subrayados_bg[index] = $(this).find(".subrayado_bg");
		});
	});

p{width: 300px;}
.subrayar{ position: relative; }
.other_span{ background-color: blue !important; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p><span class="subrayado">Lorem ipsum dolor sit amet</span>, consectetur adipiscing elit. Curabitur ultricies ultrices enim in condimentum. Nullam sollicitudin varius enim sit amet rutrum. Nam consequat vitae dolor eu pharetra. <span class="subrayado">Morbi vestibulum felis tristique velit varius maximus.</span> Sed venenatis, velit fringilla viverra dictum, magna quam faucibus est, sed congue augue enim a sem. Cras ut tristique enim. Quisque aliquam risus vitae erat lacinia venenatis. </p>

如何检测<p>标记中的换行符并在其后打印一些内容

1 个答案: