如何将我的代码更改为jQuery而不是纯JS？

Question

I am trying to set a function on jQuery instead of pure JS and I am getting an error:

 15 | prev.css('height') = prev.scrollHeight + "px";
                                               ^ Expected an assignment or function call and instead saw an expression.

This is the actual code:

 function expand(target) { let prev = target.previousElementSibling; prev.style.height = prev.scrollHeight + "px"; target.style.display = "none"; } 

 #p { height: 50px; overflow: hidden; } #read-more { background: linear-gradient(to bottom, rgba(255,0,0,0), rgba(255,255,255,1)); color: blue; cursor: pointer; position: absolute; bottom: -20px; padding: 15px 0; text-align: center; width: 100%; } #wrapper { position: relative; width: 200px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='wrapper'> <p id='p'>Pinterest taxidermy et heirloom, ennui enim eu bicycle rights fugiat nesciunt commodo. High Life food truck jean shorts in. Blog asymmetrical cold-pressed photo booth. Neutra chia in, mustache Etsy nostrud plaid kogi. Magna polaroid stumptown aliqua put a bird on it gentrify, street art craft beer bicycle rights skateboard. DIY plaid gentrify, sustainable sapiente seitan mumblecore viral cardigan. Nisi pariatur laborum cornhole kitsch tempor fingerstache Bushwick. </p> <div id='read-more' onclick="expand(this)"> READ MORE </div> </div> 

And I am trying to set that here:

var toggleReadMore = function() {
    $('#read-more').click(function(e) {
        var prev = $(this).prev();            
        prev.css('height') = prev.scrollHeight + "px";
        $(this).hide();            
    });
};

What am I doing wrong?

Answer 1

You cannot assign the value like that, you need to change it to something like

prev.css('height', prev.scrollHeight)

Where the second argument accepts the scroll height. In case of multiple CSS properties, you can pass an object like

prev.css({
  height: 'some height here',
  width: 'some width here'
});

Answer 2

** Change 3rd line like below **

var toggleReadMore = function() {
$('#read-more').click(function(e) {
    var prev = $(this).prev();            
    prev.css('height', 50);
    $(this).hide();            
  });
};