Question

如果我使用click，keyup ...函数，此代码可以正常工作。但是如何在没有键盘或点击的情况下使其工作。我的意思是，如何在加载页面时更改行高？

（注意div有不同的高度，我已经有一个jQuery文档就绪函数）

＆＃13;

$(".note").keyup(function(){
	var noteHeight = $(this).height();
		
	if (noteHeight == 25) {
		$(this).css("line-height","25px");
	} else {	
		$(this).css("line-height","normal");
	}
});

＆＃13;

#wrap { 
	margin:0 auto;
	max-width:420px;
}

.note {
	width:100%;
	min-height:25px; line-height:25px;
	margin-bottom:5px;
	padding:0px 10px;
	text-align:left;
	outline:none;
	display:inline-block;
	background:whiteSmoke;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap" >
	<div class="note" id="primer" contenteditable="true"> First line, First line, First line, First line, First line, First line, First line, First line, First line, First line, First line, First line, First line, First line, First line, First line,  </div>
	<div class="note" contenteditable="true"> Second line </div>
</div>

＆＃13;

Answer 1

$(document).ready(function(){
   $(".note").trigger('keyup');
});

这是如何为您的代码执行此操作，但是，我会分离您的代码，以便行高函数是一个名为changeLineHeight的单独函数，例如...然后您可以通过keydown，keyup等触发它只需使用changeLineHeight（）在doc.ready中运行。

e.g。

var changeLineHeight = function(){
    $(".notes").each(function(i,el){
        var noteHeight = $(this).height();
        if (noteHeight == 25) {
            $(this).css("line-height","25px");
        } else {    
            $(this).css("line-height","normal");
        }
    });
};
$(document).on('keyup keydown paste click', changeLineHeight)
.ready(function(){
    changeLineHeight();
});

Answer 2

只需将代码包装在$(document).ready()事件中，然后使用.each()函数迭代元素。

通过这种方式，您可以根据需要在文档准备好并加载时运行代码。

由于您的元素在CSS中已经有line-height: 25px;，因此您可以根据需要进行更改：

$(document).ready(function() {
    $('.note').each(function() {
        var noteHeight = $(this).height();

        if (noteHeight > 25)
            $(this).css("line-height", "normal");
    });
});

JSFiddle：http://jsfiddle.net/n32u4gnq/14/

尝试一下，让我知道它是否有帮助！

Answer 3

问题在于你获得了文档的高度而不是元素。尝试使用此代码代替文档侦听器：

$(document).ready(function() {

    var primer=document.getElementById("primer");
    var noteHeight = primer.clientHeight;
    //alert(noteHeight);
    // Your note height might not always be == to 75 or 25.
    // Maybe use <= or >= to work with a wider range of values.
    if (noteHeight == 75) {
            $(primer).css("line-height","100px");
        } else {    
            $(primer).css("line-height","normal");
    }

});

Answer 4

将代码包裹在$(document).ready()中你很高兴，因为DOM应该在它操作之前完全加载

$(document).ready(function() {
 $(".note").each(function(){
   var noteHeight = $(this).height();

    if (noteHeight == 25) {
        $(this).css("line-height","25px");
    } else {    
        $(this).css("line-height","normal");
    }
  });
});

工作Fiddle

条件无事件

4 个答案: