javascript - 如何将 JavaScript 变量作为属性存储在对象内部

Question

我试图动态获取 DOM 中图像的宽度，然后存储/覆盖先前声明的 JavaScript 对象中的现有属性。我能够获取页面上图像的宽度，并且它似乎已正确存储在我的对象 defControls 中，但我的 #showcase 的宽度仍为 600px 。任何有关此问题的帮助将不胜感激!

// USER EDITABLE CONTROLS
    var defControls = {
        content : 'img',
        showControls : true,
        prevText : '« Previous', // previous button text
        nextText : 'Next »', // next button text
        containerWidth : 600 // property to be determined by image in the DOM
    };

    // VARIABLE DECLARATIONS
    var controls = {};

    // CHECKS FOR userControls
    if (typeof userControls !== 'undefined') {
        var controls = Object.assign({}, defControls, userControls);
    } else {
        controls = defControls;
    }
    
    var contentType = $(controls.content);
    var $el = $('#showcase');
    var $leftArrow = '#left_arrow';
    var $rightArrow = '#right_arrow';
    var $load = $el.find(contentType)[0];
    
    // PRELOADS CAROUSEL WITH CORRECT SETTINGS
    $el.css('width', controls.containerWidth);
    $load.className = 'active';

    $(window).on('load', function () {
        if (controls.content == 'img') {
            controls.containerWidth = $el.children().width();
            console.log($el.children().width()); // fetches the width of the DOM img
            console.log(controls.containerWidth); // shows the width is being updated but the #showcase div remains at 600px
        }
    })
    
    // ADD CAROUSEL CONTROLS TO PAGE
    if (controls.showControls === true) {
        $('<div id="controls"><a href="#" id="' + $leftArrow.replace('#', '') + '">' + controls.prevText + '</a> <a href="#" id="' + $rightArrow.replace('#', '') + '">' + controls.nextText + '</a></div>').insertAfter('#showcase');
        $('#controls').find('#left_arrow').addClass('disabled');
    }

* {
	margin: 0px;
	padding: 0px;
}

#showcase {
	overflow: hidden;
	background: green;
}

img {
	width: 268px; /* Temporary - image width will be adjusted in the JS */
}

a {
	color: blue;
}

.disabled {
	color: red !important;
}

.slide {
	display: none;
	opacity: 0;
	position: relative;
	left: 0px;
	right: 0px;
}

.active {
	display: inline-block;
	opacity: 1;
	position: relative;
	left: 0px;
	right: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showcase">
	<img class="slide" src="https://picsum.photos/458/354/?image=306" />
	<img class="slide" src="https://picsum.photos/458/354/?image=626" />
	<img class="slide" src="https://picsum.photos/458/354/?image=806" />
</div>

Answer 1

but the width of my #showcase remains at 600px

是的，您没有再次更新。无法使属性(或变量)成为神奇引用，因此当您更新它时，展示的宽度也会发生变化。

获取宽度后只需显式更改 css:

$(window).on('load', function () {
    if (controls.content == 'img') {
        controls.containerWidth = $el.children().width(); // fetches the width of the DOM img
        console.log(controls.containerWidth); // shows the updated width
        $el.css('width', controls.containerWidth); // updates the #showcase div with the new value
//      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    }
})