小编JGa*_*rdo的帖子
CSS - 根据选择框的值隐藏元素(类)
我有一个<select>盒子<form>,当它的值是other,我想要.applicableSupportCase隐藏类的元素.我试图用CSS做这件事.我究竟做错了什么？
CSS
.applicableSupportCase {
transition: transform 0.3s ease, opacity 0.3s ease;
}
#typeBox[value="other"] ~ .applicableSupportCase{
opacity: 0;
transform: scaleY(0);
}
HTML
<select class="contactField" id="typeBox">
<option value="supportCase" selected="selected">Support case</option>
<option value="other">Other</option>
</select>
<label class="applicableSupportCase">Device:</label>
这个applicableSupportCase类有更多的元素,但你明白了.
推荐指数
解决办法
查看次数
点击时用jquery替换内部html
我想改变旋转木马外面的DIV内容.
当您点击旋转木马DIV时,它会从其隐藏的DIV中获取内容,并将其替换为旋转木马外部的其他DIV.我正在创建这样的东西,看看标题和描述在选择时如何变化.http://bqworks.com/products/3d-carousel/example2.html
HTML
<div class="carousel"> <!-- BEGIN CONTAINER -->
<div class="slides"> <!-- BEGIN CAROUSEL -->
<div class="slideItem">
<a href="#">
<img src="images/cars/orange.png" />
</a>
<p class="title">The HEAD 1</p>
<p class="description">Some big big paragraph 1</p>
</div>
<div class="slideItem">
<a href="#">
<img src="images/cars/covered.png" />
</a>
<p class="title">The HEAD 2</p>
<p class="description">Some big big paragraph 2</p>
</div>
<div class="slideItem">
<a href="#">
<img src="images/cars/orange.png" />
</a>
<p class="title">The HEAD 3</p>
<p class="description">Some big big paragraph 3</p>
</div>
</div> <!-- END SLIDES -->
</div><!-- carousel …推荐指数
解决办法
查看次数
为什么我的jQuery脚本不会加载？
我刚开始使用HTML/CSS/jQuery,我尝试开始基本的.目前我有.html,.css和.js.我的index.html将加载.css但不会加载.js.我的代码有问题吗？
HTML
<!DOCTYPE html>
<html>
<head>
<title>Super Mario!</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<img src="http://i1061.photobucket.com/albums/t480/ericqweinstein/mario.jpg"/>
</body>
</html>
CSS
img {
position: relative;
left: 100px;
top: 100px;
}
JQuery的
$(document).ready(function() {
$(document).keydown(function(key) {
switch(parseInt(key.which,10)) {
case 65:
$('img').animate({left: "-=10px"}, 'fast');
break;
case 83:
$('img').animate({top: "+=10px"}, 'fast');
break;
case 87:
$('img').animate({top: "-=10px"}, 'fast');
break;
case 68:
$('img').animate({left: "+=10px"}, 'fast');
break;
default:
break;
}
});
});
请帮我弄清楚为什么这不起作用.一些额外的信息,它们都位于我桌面上的同一文件夹中.没有子文件夹.
推荐指数
解决办法
查看次数
如何在不在移动设备上时禁用拨打电话号码的链接？
我想要构建的是一个允许用户调用的按钮。在桌面上，这个元素看起来像一个大的号召性用语，
那么在移动设备上，这将既是号召性用语，又是实际要调用的方法。
我现在需要解决的挑战是，只能在移动设备上使用呼叫功能。这是我当前的代码：
<div id="headerCTA">
<div>
<a href="tel:888-336-1301">
<div>
Schedule a pickup<br>
888-336-1301
</div>
</a>
</div>
</div>
但是，当在桌面上时（由屏幕宽度决定？），此链接应该被停用。目前，如果有人碰巧从桌面点击此按钮，它会尝试打开一个页面“tel:888-336-1301”
这会产生以下错误：
该地址无法理解 Firefox 不知道如何打开该地址，因为协议 (tel) 未与任何程序关联。
推荐指数
解决办法
查看次数
根据 ReactJS 中的变量有条件地设置复选框状态
class Example extends React.Component {
constructor() {
super();
this.isChecked = this.isChecked.bind(this);
}
isChecked(ex){
return this.props.defaults && $.inArray(ex, this.props.defaults);
}
render() {
return (
<div className="example">
{this.props.items.map(item => (
var checked = this.isChecked({item.type});
<span key={item.type}>
<input type="checkbox" {checked ? 'checked' : ''} name="example" value={item.type} id={item.type} />
<label htmlFor={item.type}>{item.display}</label>
</span>
))}
</div>
);
}
}
在上面的例子中，我已经向组件传递了一个项目this.props.items列表和一个 defaults 列表this.props.defaults。对于每个项目，如果该项目在默认列表中，我希望它的状态为checked. 保持整体设计不变，我该怎么做？（注意：我意识到我可以重新设计应用程序以避免在地图内声明变量的问题。这不是问题）。
上面的代码不起作用（显然），我只是想让每个人都了解我在这里尝试的内容。如果您运行它，则会在声明“var”的地方出现“意外令牌”之类的错误。
推荐指数
解决办法
查看次数
setState,带有<select>选项,值为对象
我有一个组件,呈现一个像这样的选择元素:
<select
name="directoryAttributes"
id="dirSelect"
className="form-control"
onChange={this._handleChange}>
{
attributes.map(attribute => {
return (
<option
value={attribute}
key={attribute.directoryAttributesNo}
>{attribute.label}</option>
);
})
}
</select>
attribute是一个带有一些键/值的普通对象.我想调用handleChange将我的组件状态设置为该选项值(即属性对象).这是我的handleChange
_handleChange(e) {
e.preventDefault();
const element = e.target;
const stateObject = {};
stateObject[element.name] = element.value;
this.setState(stateObject);
}
问题是,它似乎设置状态directoryAttributes为[object Object].为什么会发生这种情况,是一种反应的怪癖还是一些缺失的东西？
提前致谢!
编辑:对象的属性数组来自状态,只是为了澄清
推荐指数
解决办法
查看次数
设置pre标签的样式看起来像Linux终端
我正在尝试做的是创建一个<pre>看起来像bash终端的标签-黑色背景和白色字母，等距字体。
pre.bash {
background-color: black;
color: white;
font-size: medium ;
font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
display: inline;
}<pre class="bash">
-bash-3.2$ groups
unixuser feegroup figroup fogroup fumgroup
</pre>推荐指数
解决办法
查看次数