有没有一种方法可以在每次单击元素时使用jQuery来增加/减少CSS行高的值



添加运算符+=或-=都不起作用。我认为这一定与线条高度属性本身有关。我想我会在这里发帖,看看a)我只是愚蠢还是b)有人能帮我解决一些问题(理想情况下,文本字段仍然会有响应)。

以下是我的代码:https://jsfiddle.net/448ftbz6/

<head>
<script>
$(document).ready(function() {
    $("#up").click(function(){
        $("#paragraph p").css({"line-height":"75%"});
        });
    $("#down").click(function(){
        $("#paragraph p").css("line-height":"150%")
        });
    });
</script>
</head>
<body>
<div id="paragraph">
    <div id="arrows">
        <div id="up">less</div><br>
        <div id="down">more</div>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed felis semper, sodales mi sed, bibendum eros. Nunc malesuada ligula nisl, vel vehicula ipsum gravida non. Praesent mollis orci arcu, id fermentum lectus auctor sit amet. Suspendisse ultrices cursus purus quis consequat. Suspendisse placerat eget lorem vel euismod. Morbi volutpat nisl nulla, at fermentum erat imperdiet varius. Donec non porttitor mi. Nam iaculis turpis sit amet lacus luctus, nec consequat sapien ultricies. Duis placerat ut mauris eget scelerisque.</p>
</div>
</body>
</html>

jQuery似乎可以工作,所以这不是问题所在;它只是没有做我想做的事情。理想情况下,当人们点击"更少"或"更多"按钮时,线条高度会比以前减少或增加。然而,我似乎只能设置一个值。有人知道我能做些什么来解决这个问题吗?

试试这个

$(document).ready(function() {
    $("#up").click(function(){
        $("#paragraph p").css({"line-height":$("#paragraph p").height()*0.75+"%"});
	});
    $("#down").click(function(){
	    $("#paragraph p").css("line-height", $("#paragraph p").height()*1.5+"%")
	});
});
#arrows {
	float: right;
}
#up, #down {
    height: 50px;
	width: 50px;
	background-color: #FF00FF;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="paragraph">
<div id="arrows">
    <div id="up">less</div><br>
<div id="down">more</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed felis semper, sodales mi sed, bibendum eros. Nunc malesuada ligula nisl, vel vehicula ipsum gravida non. Praesent mollis orci arcu, id fermentum lectus auctor sit amet. Suspendisse ultrices cursus purus quis consequat. Suspendisse placerat eget lorem vel euismod. Morbi volutpat nisl nulla, at fermentum erat imperdiet varius. Donec non porttitor mi. Nam iaculis turpis sit amet lacus luctus, nec consequat sapien ultricies. Duis placerat ut mauris eget scelerisque.</p>
</div>

是的!

https://jsfiddle.net/stephm/448ftbz6/2/

你需要首先将初始行高度设置为p。然后点击,你得到行高度并添加10px或从中减去10px。例如,每次点击都会将行高度减少10px:

$("#up").click(function(){
    var curLineHeight = $('p').css('line-height');
    $("#paragraph p").css('line-height', (parseInt(curLineHeight, 10) - 10) + 'px');
});

这是我对它的看法(fiddle)

$(document).ready(function () {
    // click handler for element with id #up
    $("#up").click(function () {
        var newLineHeight = calculateNewLineHeight(true);
        updateLineHeight(newLineHeight);
    });
    // click handler for element with id #down
    $("#down").click(function () {
        var newLineHeight = calculateNewLineHeight(false);
        updateLineHeight(newLineHeight);
    });
    // Function to updated the line height of any
    // 'p' under the paragraph with id '#paragraph' 
    // the newLineHeight is meant to be an number
    var updateLineHeight = function (newLineHeight) {
        // updates the line-height for a paragraph with the new line
        // height (passed in as a parameter) 
        // - let's not forget to add the units of the new line-height
        // (in this case is 'px' for pixels)
        $("#paragraph p").css({
            "line-height": newLineHeight + "px"
        });
    };
    // Function to calculate the new line-height depending on the
    // button clicked (i.e. up or down button)
    var calculateNewLineHeight = function (isUp) {
        // get the existing line of the element 
        var elem = $("#paragraph p");
        var currentLineHeight = $(elem).css("line-height");
        // some browsers return 'normal', instead of a line-height
        // number.  If that's the case, use font size.
        // in either case, we want to remove the units 
        // (in this case 'px') before returning an value
        if( currentLineHeight === 'normal') {
            // use font-size
            currentLineHeight = $(elem).css('font-size');        
            currentLineHeight = Math.floor(parseInt(currentLineHeight.replace('px','')) * 1.5);
        }else{
            currentLineHeight = Math.floor(parseInt(currentLineHeight.replace('px','')));
        }        
        // if the button pressed is 'up' we want to increase the 
        // current line height by 1.5 times.  Otherwise, we decrease
        // it by to 75% of the original value.
        if (isUp) {
            return currentLineHeight * 1.5;
        } else {
            return currentLineHeight * .75;
        }
    };
});

最新更新