变量值未在函数内部传递答案

【问题标题】：Variable value is not being passed inside the function变量值未在函数内部传递
【发布时间】：2023-03-07 11:48:02
【问题描述】：

我有功能，但由于某种原因无法正常工作。在我的 AngularJS 应用程序中，我需要使用 jqLite 操作 CSS。

假设有两个 div，第一个有一定的宽度。

<div class="primary-item"></div>
<div class="secondary-item"></div>

我想将次要项的宽度设置为与主要项相同。

一切都很好，直到函数更改 CSS。看起来widthToSet 值没有通过那里。

secondaryItem.css({width: + widthToSet + 'px', height: '100px'});

请看下面sn-p中的代码。

function changeCss() {
    var masterItem = angular.element( document.querySelector( '.primary-item' ) );
    var widthToSet = angular.element( masterItem.prop('offsetWidth') );
    alert("width to set is" + widthToSet);
    var secondaryItem = angular.element( document.querySelector('.secondary-item') );
    secondaryItem.css({width: + widthToSet + 'px', height: '100px'}); /*width is not being set*/
    //secondaryItem.css({width: '300px', height: '100px'}); /*works fine*/
}

angular.element(document).ready(function () {
  changeCss();
});

.primary-item {border: 1px solid red; padding: 10px;}
.secondary-item {border: 1px solid green; padding: 10px;}
.primary-item, .secondary-item {float: left; clear: both; margin-bottom: 10px;}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<div class="primary-item">Some content here</div>
<div class="secondary-item"></div>

谢谢！

【问题讨论】：

document.querySelector('.primary-item') 有返回什么吗？
+ widthToSet + 'px' 的结果是什么？
@JeffWatkins 这不是问题。在字符串值之前使用一元运算符相当于将其传递给Number()：jsfiddle.net/dmo2ggo1
var widthToSet = masterItem.prop('offsetWidth');
@Haketo 谢谢！我只是过于复杂了

标签： jquery css angularjs jqlite

【解决方案1】：

感谢@Haketo 的帮助。

问题出在widthToSet 变量的声明中。

function changeCss() {
    var masterItem = angular.element( document.querySelector( '.primary-item' ) );
    var widthToSet = masterItem.prop('offsetWidth');
    var secondaryItem = angular.element( document.querySelector('.secondary-item') );
    secondaryItem.css({width: + widthToSet + 'px', height: '100px'}); 
}

angular.element(document).ready(function () {
  changeCss();
});

.primary-item {border: 1px solid red; padding: 10px;}
.secondary-item {border: 1px solid green;}
.primary-item, .secondary-item {float: left; clear: both; margin-bottom: 10px;}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<div class="primary-item">Some content here</div>
<div class="secondary-item"></div>

【讨论】：