我如何在jQuery中做这些事情？ [英] How could I do this things in jQuery?
问题描述
-
如何在calc函数中设置CSS参数？ （在我的const STYLES我有属性TOP，我想要它是：numberOfMenuItems * -48px）。
-
如何在const STYLE中设置一个param height = $（'。contenedor'）。heigh（）（一个取决于div高度的参数）？
$ b $代码是：（我想添加我的常量STYLES这两点在参数
顶部和高度正如我在这篇文章的最后一节所描述的那样） import'
从'material-ui / AppBar'导入AppBar;
从material-ui / Drawer导入抽屉;
从'material-ui / MenuItem'导入MenuItem;
从material-ui / IconButton导入IconButton;
从'material-ui / svg-icons / navigation / menu'导入NavigationMenu;
导入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'，
顶部：'0px'
}，
contentStyleActive：{
marginLeft：'256px'，
position：'relative'，
top：'-144px'
}
};
导出默认类MenuAlumno扩展了React.Component {
constructor（）{
super（）;
this.state = {
drawerOpen：false
}
}
}
render（）{
return b $ b< 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>菜单项< / MenuItem>
< MenuItem>菜单Ite M< /菜单项>
< MenuItem>菜单项< / MenuItem>
< / Drawer>
< / div>
）;
}
}
所以...我想要这个：在我的常数STYLES想修改（更改是在最后一个元素 contentStyleActive ，参数顶部和 height ）：
const STYLES = {
title：{
光标：'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！
顶部：-48px * $（'MenuItem'）。length（），
height：$（'＃IdOfMyDiv'）。heigh（）
}
};
谢谢！
您可以使用一个函数来计算和添加动态值到您的样式，该元素将其style属性指向该函数，如下所示：
以下编辑版本（添加导入jQuery）
将jquery安装到您的项目中：
npm install --save jquery
然后也从'jquery'导入$ ：
EDITED VERSION 2：添加class-name例如'MyClass'到MenuItem组件（在render方法中），然后通过$（'。MyClass'）来获取长度，而不是$（'MenuItem'）。原因是jQuery没有看到react-component（这是MenuItem），jQuery将会理解DOM：$（'。MyClass'），$（'＃domID'）或类似的东西
import来自'react'的反应;
import'from'jquery';
const STYLES = {
// ...
contentStyleActive：{
marginLeft：'256px'，
position：'relative'，
}
};
export default class MenuAlumno extends React.Component {
constructor（props）{
super（props）;
// ...
}
contentStyleActiveCalculation（options）{
options.top = parseInt（-48 * $（'。MyClass'）。length） +'px';
options.height = $（'＃IdOfMyDiv'）。height（）+'px';
返回选项;
}
render（）{
// ...
< SomeElement style = {this.contentStyleActiveCalculation（STYLES.contentStyleActive）} / >
// ...
}
}
您不能直接将计算直接添加到const STYLES = {...}声明中，这将在页面上显示元素之前计算（所以当时jQuery不能看到这些DOM元素，并且不知道它们的高度或长度）
How can I set a CSS parameter in function of a calc? (in my const STYLES I have the property TOP that I want that it be: numberOfMenuItems * -48px).
How can I set a in const STYLE a param height = $('.contenedor').heigh() (a parameter that depends on the height of a div)?
The code is: (I want add in my constant STYLES this two points on the parametres top and height as I describe at last of this post)
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>
);
}
}
So... I want this: In my constant STYLES wanna modify (the changes are made on the last element, contentStyleActive, the parametres top and height):
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()
}
};
Thank you!
You can use a function to calculate and add dynamic values to your styles, and the element will have its "style" attribute pointing to that function, something like this:
EDITED VERSION BELOW: (added importing jQuery)
install jquery to your project:
npm install --save jquery
Then also import $ from 'jquery' :
EDITED VERSION 2: add class-name, for example 'MyClass' to MenuItem component (in render method), then acesss here by $('.MyClass').length instead of $('MenuItem').length . The reason is jQuery wil not understand react-component (which is MenuItem), jQuery will understand DOM: $('.MyClass'), $('#domID') or something like that
import React from 'react';
import $ from 'jquery';
const STYLES = {
// ...
contentStyleActive: {
marginLeft: '256px',
position: 'relative',
}
};
export default class MenuAlumno extends React.Component {
constructor(props){
super(props);
// ...
}
contentStyleActiveCalculation(options){
options.top = parseInt(-48 * $('.MyClass').length) + 'px';
options.height = $('#IdOfMyDiv').height() + 'px';
return options;
}
render() {
// ...
<SomeElement style={this.contentStyleActiveCalculation(STYLES.contentStyleActive)} />
// ...
}
}
You cannot just add the calculation directly into the const STYLES = {...} declaration, which will be calculated BEFORE elements appear on page (so at that time, jQuery cannot "see" those DOM elements, and cannot know their height or length)
这篇关于我如何在jQuery中做这些事情？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
