开发者

Pass along variables between different functions

So I was trying to figure this out for hours and hours! I'm trying to make a universal function where if the content is only a certain height, and if the user clicks on "show more", it will reveal the entire content by setting the height to auto. The problem is I'm using .toggle() and it needs two different functions. I want to somehow store the original value of the height, change its height to auto, and then restore its original height when the user clicks show/hide. There will be different divs in the page so ill need to make sure that when the user clicks show/hide, it will refer to the closest div.

I trying using .data() to pass along the same information across two seperate functions and somehow it did work the first time i did it, but i dont know what happen and the value stored in .data can't be passed along the other function.

Here's the code:

    // When the user clicks the button with the class .more
    $('.more').toggle(

    //This stores the height of the original div and then sets it height to auto
    function (e) {
        e.preventDefault();

        // This will travel up to the parent and find the corrresponding content div and store its height in a variable oh(original height)
        var oh = $(this).parents('.parent')
            .find('.content').height();

        // im trying to get this information to be pass along the other function
        $(this).data('original_height', oh);


        $(this).$(this).parents('.parent')
            .find('.content')
            .css('height', 'auto');
        $(this).text('hide');
    },

        // This function restores the original height of the div 
    function (e) {
        e.preventDefault();

        // i开发者_JS百科m trying to get the value of the original_height to be pass along into this function. Howw!!!! 
        var original_height_value = $(this).data('original_height')

        $(this).parents('.' + parent)
            .find('.' + content)
            .css('height', original_height_value + 'px');
        $(this).text('more');
    }
});


The data() part of the code seems fine to me. What I don't understand are these two lines:

    $(this).$(this).parents('.parent').find('.content').css('height','auto');

and

    $(this).parents('.'+ parent).find('.' + content).css('height', original_height_value + 'px');

What is in the variables parent and content?

Shouldn't these two lines look for the same thing?

Also, I don't know why you would ever use $(this).$(this), $(this) should be fine by itself.


Toggle doesn't accept two functions, only a callback function: api.jquery.com/toggle

Seeing your comment for Hogan: In the first function the oh has the correct value?

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜