Comment faire pour utiliser jQuery variable en propriété CSS

Je avoir la suite de jQuery qui trouve la hauteur d'une image réactive:

        $(document).ready( function() { //Fires when DOM is loaded
            getImageSizes();
            $(window).resize(function() { //Fires when window is resized
                getImageSizes();
            });
        });
        function getImageSizes() {
            $("#slideshow img").each(function() {
                var $height = $(this);
                console.log( $height.height() );

            });

        }

Et mon but est d'utiliser le $hauteur variable pour spécifier la hauteur d'une div avec l'ID de diaporama.

Je suppose que je peux utiliser ceci:

$('#slideshow').css({'height': $height + 'px;'});

Cependant il ne fonctionne pas (pas de hauteur est spécifiée).

J'ai inclus la ligne ci-dessus comme suit:

        $(document).ready( function() { //Fires when DOM is loaded
            getImageSizes();
            $(window).resize(function() { //Fires when window is resized
                getImageSizes();
            });
        });
        function getImageSizes() {
            $("#slideshow img").each(function() {
                var $height = $(this);
                console.log( $height.height() );

                $('#slideshow').css({'height': $height + 'px;'});
            });

        }

Est-il quelque chose que je suis absent?

Peut-on y voir dans un jsfiddle?
Vous comprenez aussi que la height de #slideshow va être la hauteur de la dernière image. Donc, si la dernière image $("#slideshow img") hauteur est de 10 alors que c'est ce que votre #slideshow hauteur va être.
Je ne suis pas encore sûr. La bonne nouvelle, c'est que chaque image est de la même hauteur, donc je pensais d'abord de trouver la hauteur de l'image réactive, puis en ajoutant une constante qui semble bon dans toutes les fenêtres ou l'ajout d'un pourcentage supplémentaire.

OriginalL'auteur Raphael Rafatpanah | 2013-03-04

  1. 4

    Vous vous connectez $height.height(), mais alors seulement à l'aide de $height dans le CSS.

    Si vous avez nommé vos variables de mieux, il serait plus facile :p

    var $height = $(this).height();
$("#slideshow").css({"height":$height+"px"});

    Ou ma préférence:

    document.getElementById('slideshow').style.height = this.height+"px";
    aucune raison pour js version préférence, autres que la performance ? :O
    Je pense que la performance est une assez bonne raison. Je ne peut pas avoir été autour dans les jours où 8ko a beaucoup de mémoire, mais vous ne savez pas à partir de mon obsession avec efficacité!
    Oui, il est. J'étais juste curieux et a été pensée si je peux apprendre quelque chose de nouveau 🙂
    Ok, j'ai obtenu ce travail. Je suis désolé, j'ai trouvé le code à partir d'une précédente débordement de pile question. Je suis très, très nouveau pour jQuery! Il semble que ma fonction n'est pas d'obtenir une hauteur de chargement de la page, uniquement sur redimensionner. Toutes les suggestions?

    OriginalL'auteur Niet the Dark Absol

  2. 1

    $height est un jQuery variable. Vous avez besoin pour obtenir la hauteur, en appelant .height().

    $('#slideshow').css({'height': $height.height() + 'px'});

    Ou, vous pouvez stocker la hauteur réelle d'une variable à la place.

    var height = $(this).height();
$('#slideshow').css({'height': height  + 'px'});
    Je vous remercie pour votre aide. Il semble que la fonction getImageSizes(); n'est pas correctement déclenché au chargement de la page. Mais il ne fonctionne pas correctement sur redimensionner maintenant. La console renvoie une valeur de 0 au chargement de la page. Des idées?
    Essayez de mettre de la fonction à l'intérieur de l'jQuery.prêt de la fonction.

    OriginalL'auteur jrummell

  3. 1

    Vous permet d'économiser de l'objet jQuery $(this) pour votre variable $height

    : var $height = $(this).height(); Et vous serez tous ensemble.

    Je vous remercie pour votre aide. Il semble que la fonction getImageSizes(); n'est pas correctement déclenché au chargement de la page. Mais il ne fonctionne pas correctement sur redimensionner maintenant. La console renvoie une valeur de 0 au chargement de la page. Des idées?

    OriginalL'auteur Mark Pieszak - Trilon.io

  4. 1

    Le problème est dans votre gestionnaire d'événement:

            function() {
            var $height = $(this);
            console.log( $height.height() );

            $('#slideshow').css({'height': $height + 'px;'});
        }

    Vous êtes en essayant de faire $height (qui est un objet jQuery) concaténé avec 'px;' (une chaîne). Cette phase se termine avec la chaîne '[object Object]px;', ce qui n'est évidemment pas ce que vous voulez. Vous devez utiliser la valeur de la hauteur de la place. C'est je crois ce que vous voulez:

            function() {
            var height = $(this).height();
            console.log( height );

            $('#slideshow').css({'height': height + 'px'});
        }
    Je vous remercie pour votre aide. Il semble que la fonction getImageSizes(); n'est pas correctement déclenché au chargement de la page. Mais il ne fonctionne pas correctement sur redimensionner maintenant. La console renvoie une valeur de 0 au chargement de la page. Des idées?

    OriginalL'auteur lonesomeday