我刚刚开始进入JQuery,所以如果这是一个简单的问题,我会提前道歉.
我正在使用关于打印预览的A List Apart文章尝试在我正在处理的webapp中获取实时打印预览.我已经让它工作得令人满意,但我现在正在尝试将我的代码重构为我认为应该在内部看起来的内容.我目前有两套方法,一套用于显示微观块,另一套用于移除它.我宁愿只有一个单元来切换相关元素的适当值.
对于CSS,这意味着禁用非打印预览图纸并启用打印预览图纸,反之亦然.对于我的显微术,这意味着设置display到block,而不是none再次反之亦然.
至少对于样式表链接,我想简单地遍历相关link元素的集合并设置disabled为!disabled但我无法弄清楚如何做到这一点.我正在使用jQuery,但我并不反对低于这个抽象级别.
我假设一旦我知道如何为link元素做到这一点我应该能够扩展解决方案以切换display微观div 的属性.
这是我目前的好奇功能:
function printPreview() {
$("link[rel*='style'][media!='print'").attr("disabled", true);
$("link[rel*='style'][title='print preview']").attr("disabled", false);
addPrintPreviewMicrocopy();
}
function addPrintPreviewMicrocopy() {
$("div[id='print-preview-microcopy']").css({'display':'block'});
}
function normalView() {
$("link[rel*='style'][media!='print'").attr("disabled", false);
$("link[rel*='style'][title='print preview']").attr("disabled", true);
removePrintPreviewMicrocopy();
}
function removePrintPreviewMicrocopy() {
$("div[id='print-preview-microcopy']").css({'display':'none'});
}
提前致谢!
感谢大家.这是我的最终解决方案:
function toggleView() {
$("link[rel*='style'][media!='print']").each( function() {
this.disabled = !this.disabled;
});
}
事实证明,我甚至不需要切换div,因为单独的样式表就是这样做的.
HTML:
<div class="interview">
<h4>Interview</h4>
<a href="#" class="question">This is question 1?</a>
<div class="answer">This is an answer!</div>
<a href="#" class="question">This is question 2?</a>
<div class="answer">This is an answer!</div>
<a href="#" class="question">This is question 3?</a>
<div class="answer">This is an answer!</div>
</div>
jQuery的:
if ($('interview')[0]) {
$('interview .question').toggle(function () {
$(this).next('.answer').slideIn();
},
function () {
$(this).next('.answer').slideOut();
});
}
......我无法弄清楚它为什么不起作用.
我想知道是否有一个更简单,更好的解决方案来切换两个值之间的变量而不是(确定我可以编写一个m函数但不知何故我感觉有一些内置在matlab中,但我在google搜索时找不到它for matlab toggle)
if(x == 0)
x = 1;
else
x = 0;
end
谢谢
我想对这段代码提供一些帮助,我已经在stackoverflow上阅读了类似的问题和答案,但我仍然无法做到正确.
我有一个由.html("")填充的链接来阅读 more…
单击时打开隐藏的div,最后.html("")读取 less...
当我单击关闭时,div滑动关闭,但文本仍然显示 less...
我已经阅读了很多关于如何做到这一点的文章,但我很困惑,无法超越这最后的障碍,任何帮助都会非常感激.
//这是介绍div
<div id="" class="">
<p>
Ligula suspendisse nulla pretium, rhoncus tempor placerat fermentum, enim
integer ad vestibulum volutpat. Nisl rhoncus turpis est, vel elit, congue
wisi enim nunc ultricies sit, magna tincidunt. Maecenas aliquam maecenas
ligula nostra, accumsan taciti.
</p>
</div>
//隐藏下一个div
<div class="overview-continued">
<p>
Ligula suspendisse nulla pretium, rhoncus tempor placerat fermentum, enim
integer ad vestibulum volutpat. Nisl rhoncus turpis est, vel elit, congue
wisi enim nunc ultricies sit, magna tincidunt. …我试图实现这一点是否有一种简单的方法可以在点击事件中切换两个状态之间的背景位置？
我已经构建了一个应该工作的函数..没有得到线索为什么它不会.我花了几个小时试图为我的项目中这么乏味的部分实现这个目标,但这是必要的.
请看一下这个功能:
$("#secondarrow").click(function(){
/*$(".arrows").toggle(
function(){
$(this).css({"background-position":"0px 0px"});
},
function(){
$(this).css({"background-position":"0px -30px"});
});*/
/*$(".arrows").toggleClass(function() {
if ($(this).is(".arrows")) {
return ".arrowsup";
} else {
return ".arrows";
}
});*/
$('#secondarrow').toggle(function() {
$("#arrow2").css('backgroundPosition', '0px -15px');
}, function() {
$("#arrow2").css('backgroundPosition', '0px 0px');
});
$("#ukmore").slideToggle(100);
$("#clause").slideToggle(100);
});
它应该做的是,在单击div名称第二个箭头时,它会显示许多子类别,同时从指向下方的箭头切换div子项的背景位置和id#arrow2(表示单击显示更多)向上指向的箭头,该箭头是同一背景图像的一部分(表示点击隐藏子类别).
我已经尝试了许多不同的功能结构,但它们都没有按要求工作,最新的一个 - 没有注释掉的 - 确实改变了背景位置以显示向上的箭头,但它只是在第一次单击AND仅在直接单击#arrow1 div时执行此操作,当我需要它来单击#secondarrow div时来回切换.
请帮忙.
我想为我的纯JavaScript切换类函数添加过渡时间，我知道该如何编码，但是我忘记了，现在需要一些建议
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#div{
width: 200px;
height: 150px;
}
.class1 {
color: #f00;
background-color: #2fadac;
}
.class2 {
color: #00f;
background-color: #c33;
}
</style>
</head>
<body>
<div id="div" class="class1">click here</div>
<script>
function classToggle() {
this.classList.toggle('class1');
this.classList.toggle('class2');
style.cssText ="-webkit-transition: all 0.5s ease-in-out;";
}
document.querySelector('#div').addEventListener('click', classToggle);
</script>
</body>
</html>
任何帮助，将不胜感激
我正试图通过点击视频来切换静音.
使用此代码单击时,我可以取消静音视频:
$(document).ready(function(){
$("video").prop('muted', true);
$("video").click( function (){
if( $("video").prop('muted', true) )
{
$("video").prop('muted', false)
}
});
});
现在我只想再次点击它并将其静音.
我正在进行按位操作(在C中),我想知道如何检查一个位是否在前一个值和新值之间切换.
Example :
oldValue = 0x0FF //0000 1111 1111 in binary
newValue = 0x100 //0001 0000 0000 in binary
在这个例子中,我想检查bit8(第9位)是否已从0切换到1.
我知道如果我想知道是否设置了一下,可以使用:
value & (1 << 8)
那么,这是正确的吗？:
if( (oldValue & (1 << 8)) == (newValue & (1 << 8)) ) //return 0 if toggled
我建立了一个React切换菜单,由一个按钮触发,问题是这发生了一次所以,如果我再次点击按钮,菜单仍然打开而不是关闭.我应该包括隐藏功能但不知道如何.任何人都可以告诉我应该改变什么？我在这个例子中使用它如何使用ReactJS构建滑动菜单
Import { Menu } from '../../components';
export default class ToggleMenu extends React.Component {
showRight = () => {
this.right.show();
}
constructor(props) {
super(props);
this.showRight = this.showRight.bind(this);
}
render() {
return (
<div>
<button onClick={this.showRight}>Show Right Menu!</button>
<Menu ref={right => this.right = right} alignment="right">
<MenuItem hash="first-page">First Page</MenuItem>
<MenuItem hash="second-page">Second Page</MenuItem>
<MenuItem hash="third-page">Third Page</MenuItem>
</Menu>
</div>
);
}
}
从'react'导入React;
export default class Menu extends React.Component {
state = {
visible: false,
};
show() {
this.setState({ visible: true });
} …我正在为VueJS 使用VuetifyJS,如果交换机切换,我需要调用一个函数.怎么做？
模板:
<v-container fluid>
<v-switch :label="`Switch 1: ${switch1.toString()}`" v-model="switch1"></v-switch>
</v-container>
</template>
脚本:
<script>
export default {
data () {
return {
switch1: false
}
}
}
</script>
toggle ×10
jquery ×5
javascript ×3
attributes ×1
boolean ×1
button ×1
c ×1
click ×1
css ×1
ecmascript-6 ×1
eventhandler ×1
html ×1
html5-video ×1
matlab ×1
mute ×1
reactjs ×1
slide ×1
transition ×1
vue.js ×1
vuetify.js ×1