jquery - 我怎么能在 jQuery 中做这些事情？

Question

• 如何在计算函数中设置 CSS 参数？ (在我的 const STYLES 中，我有我想要的属性 TOP:numberOfMenuItems * -48px)。

• 如何在 const STYLE 中设置一个参数 height = $('.contenedor').heigh()(一个取决于 div 高度的参数)？

代码是:(我想在我的常量 STYLES 中添加参数 top 和 height 上的这两点，正如我在本文最后描述的那样)

import React from 'react';
import AppBar from 'material-ui/AppBar';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
import IconButton from 'material-ui/IconButton';
import NavigationMenu from 'material-ui/svg-icons/navigation/menu';
import NavigationClose from 'material-ui/svg-icons/navigation/close';


const STYLES = {
title: {
    cursor: 'pointer'
},
titleStyle: {
    textAlign: 'center'
},
displayMenuTrue: {
    position: 'relative'
},  
displayMenuFalse: { 
    display: 'none'
},
contentStyle: {
    transition: 'margin-left 450ms cubic-bezier(0.23, 1, 0.32, 1)',
    marginLeft: '0px',
    top: '0px'
},
contentStyleActive: {
    marginLeft: '256px',
    position: 'relative',
    top: '-144px'
}
};

export default class MenuAlumno extends React.Component {
constructor() {
    super();
    this.state = {
        drawerOpen:false
   }
}
}

render() {
    return (
        <div>
            <AppBar
                title={<span style={STYLES.title}>- PLATAFORMA DE 
INCIDENCIAS -</span>}
                onTitleTouchTap={this.handleTouchTap}
                titleStyle={STYLES.titleStyle}
            iconElementLeft={this.state.drawerOpen ?  <IconButton>
 <NavigationClose/></IconButton> : <IconButton><NavigationMenu/></IconButton>}
                onLeftIconButtonTouchTap={this.controlMenu}
            />
            <Drawer 
                open={this.state.drawerOpen}
                containerStyle={this.state.drawerOpen ? 
STYLES.displayMenuTrue : STYLES.displayMenuFalse}
            >
                <MenuItem>Menu Item</MenuItem>
                <MenuItem>Menu Item</MenuItem>
                <MenuItem>Menu Item</MenuItem>
            </Drawer>
        </div>
    );
}
}

所以...我想要这个:在我的常量 STYLES 中想要修改(更改是在最后一个元素 contentStyleActive 上进行的，参数 top 和 高度):

const STYLES = {
title: {
    cursor: 'pointer'
},
titleStyle: {
    textAlign: 'center'
},
displayMenuTrue: {
    position: 'relative'
},  
displayMenuFalse: { 
    display: 'none'
},
contentStyle: {
    transition: 'margin-left 450ms cubic-bezier(0.23, 1, 0.32, 1)',
    marginLeft: '0px',
    top: '0px'
},
contentStyleActive: {
    marginLeft: '256px',
    position: 'relative',
    // HERE!
    top: -48px * $('MenuItem').length(),
    height: $('#IdOfMyDiv').heigh() 
}
};

谢谢!

Answer 1

在 jQuery 中，您可以使用 .length 属性来计算元素的数量。 https://api.jquery.com/length/

要获取元素的高度，您可以使用 .height() 方法。注意:还有 innerHeight() 和 outerHeight()，取决于你是否要包含一个元素 padding/margin/border。 http://api.jquery.com/height/

所以在你的例子中；

top: parseInt(-48 * $('MenuItem').length) + 'px',
height: $('#IdOfMyDiv').height() + 'px'