有条件的无事件

Question

如果我使用 click、keyup... 功能，此代码将有效。但是如何让它在没有键盘或点击的情况下工作。我的意思是，如何在页面加载时更改行高？

（注意div有不同的高度，我已经有一个jQuery文档准备功能）

小提琴：http://jsfiddle.net/n32u4gnq/1/

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

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

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

Answer 1

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

这是为您的代码执行此操作的方法，但是，我会将您的代码分开，以便 line-height 函数是一个名为 changeLineHeight 的单独函数......然后您可以通过 keydown、keyup 等触发它只需使用 changeLineHeight() 在 doc.ready 中运行即可。

例如

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() 中就可以了，因为 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

Answer 4

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

$(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");
    }

});