必须有一种方法可以在一个toggleClass()中执行这些操作:
$('div').on("mouseenter", ".myButton", function(){
$(this).addClass('rollOver');
});
$('div').on("mouseleave", ".myButton", function(){
$(this).removeClass('rollOver');
});
...但它在on()中,因为myButton是动态创建的.
有没有人知道如何以整洁,一行格式编写以下内容？我确信这是可能的,但不能用它来做得很远.
if($('#myDiv').hasClass('hidden')){
$('#myDiv').toggleClass('shown hidden');
}
基本上只在一个方向上执行切换.
非常感谢,
汤姆.
这是小提琴.我试图通过使用a <div>和应用颜色来创建我自己的复选框$().css().当您单击时div,我试图$().toggleClass()在单击功能中使用将背景颜色更改为#96f226
jQuery的:
$('div').mouseenter(function(){
$(this).css('background','#656565');
});
$('div').mouseleave(function(){
$(this).css('background','#4a4a4a');
});
$('div').click(function(){
$(this).toggleClass('active');
});
HTML:
<div></div>
CSS:
div {
width: 15px;
height: 15px;
background: #4a4a4a;
cursor: pointer;
}
.active {
background: #96f226
}
我正在尝试在单个按钮上切换类,其中类将根据状态动态分配.这是我的代码:
$('body').on('click', '.button', function () {
var $itm = $(this).children(".icon");
if ($itm.hasClass('hide')) {
$itm.toggleClass('unhide', 'hide')
} else {
$itm.toggleClass('hide', 'unhide')
}
});
我想要实现的是:如果一个按钮有类.hide,则将onclick该类切换为.unhide,反之亦然.
到目前为止,唯一一次切换工作的时间是第二次点击.第一次点击不会改变任何东西.
我有一个带有子元素的父元素,通过单击页面上的特定按钮显示/隐藏它.该按钮只是将样式从display:none更改为display:block,非常简单.子元素以display:none开头;
我想在单击父元素时隐藏此元素,但是在单击子元素时不会隐藏此元素,这是有问题的,因为子元素是父元素的一部分.
我看到有data(); 可以检查是否单击了一个元素,但这似乎不起作用.
这是html:
<style>
#parent {width:200px;height:200px;}
#child {display:none;width:50px;height:50px;}
#child.display {display:block;}
</style>
<div id="parent">
Some content
<div id="child">Some other content</div>
</div>
<button id="clickMe">Toggle Child</button>
这是jQuery:
$(function()
{
$('#clickMe').click(function()
{
$('#child').toggleClass('display');
});
$('#parent').click(function()
{
if($('#child').data('clicked') == true )
{
// do nothing
} else
{
$('#child').toggleClass('display');
}
});
});
为了这个例子,我默认隐藏了子元素.别担心,我不会在生产中这样做.我正在努力弄清楚如何做这个基本功能.
这是一个演示它的链接:jsfiddle
我有两个slideToggles的奇怪问题.#bannerChoice幻灯片工作得很好,但是#search幻灯片,打开时应该重叠#bannerChoice,从不打开多个中途.相反,它会强制页面重新加载.
这是我的代码:
function bannerChoice()
{
$('#bannerChoice').slideToggle(function()
{
if($('#bannerChoice').is(':visible'))
{
$('html').css({overflow:"hidden",height:"100%"});
}
else
{
$('html').css({overflow:"auto",height:"2171px"});
}
});
}
function toggleForm()
{
$('#search').slideToggle(350);
return false;
}
和
<div id="bannerChoice">
<div id="bcText">Select a banner graphic:<br/></div>
<div id="bcImages">
<form action="#" method="post">
<input type="hidden" name="setBanner" id="setBanner" value="">
<img src="/media/profile/images/bgs/bg1_thumb.png"
onClick="setBanner(1,event);"/>
<img src="/media/profile/images/bgs/bg2_thumb.png"
onClick="setBanner(2,event);"/>
<img src="/media/profile/images/bgs/bg3_thumb.png"
onClick="setBanner(3,event)" />
<img src="/media/profile/images/bgs/bg4_thumb.png"
onClick="setBanner(4,event)" /><br/>
<span id="bcBttns">
<input type="submit" value="Submit" class="submit"
name="bttnSubmit" /><input type="button" value="Cancel"
onClick="bannerChoice()">
</span>
</form>
</div>
<div id="bcBG"> </div>
</div>
和
<span onClick="toggleForm()">
<a href="" style="display:inline-block; color:#bbb; …我有这个在移动设备上工作,但由于jQuery的32kb gzip-ed我想知道是否可以创建这个代码
$(document).ready(function() {
$('body').addClass('js');
var $menu = $('#menu'),
$menulink = $('.menu-link'),
$wrap = $('#wrap');
$menulink.click(function() {
$menulink.toggleClass('active');
$wrap.toggleClass('active');
return false;
});
});
可以写在没有库依赖任何香草JavaScript.
可以吗？我从哪里开始？
我有一个像这样的Span标签
<span id="SpanHeader" class="CourseHeader"><a class="SubCourses" href="#" ><strong>@course.CourseTitle</strong></a></span>
Span由一个名为CourseHeader的CSS类设置样式.当用户单击Span中的超链接时,我希望Span CSS类与另一个CSS类切换.
我有以下CSS元素
/********* Course Collaspable Headings ******/
.CourseHeader
{
background-color: #F5F5F5;
border: 1px solid black;
display: inline-block;
width: 600px;
padding: 4px;
color: Black;
}
.CourseHeader.Black
{
background-color: #000000;
border: 1px solid black;
display: inline-block;
width: 600px;
padding: 4px;
color: #FFFFFF;
}
以下JQuery代码尝试在单击超链接后使Span更改样式
$("a.SubCourses").click(onSubCourses);
function onSubCourses() {
$(".SpanHeader").toggleClass("Black");
}
我试着寻找其他人如何这一点,像这样的,但是我不能得到它的工作我自己.
有人可以帮忙吗？
谢谢.
每次单击 div 元素时，我尝试在 SVG 元素上使用 jQuery 切换 cssclass。
根据我的阅读，使用 SVG 元素执行此操作存在问题，这种方法是一种解决方案：
$("#div1").click(function() {
$("#svg1").classList.toggle("clicked");
});`
然而，这不起作用。所以我认为这是由于在此函数中使用了 SVG 元素。但是当用 div 元素替换所述 SVG 元素时，如下所示：
$("#div1").click(function() {
$("#div2").classList.toggle("clicked");
});
尽管函数中没有 SVG 元素，但该类仍然不会切换。
我有一个如下按钮，我想更改其上的 span 的类名。但下面的代码不起作用。我怎样才能做到这一点？
<button id="btn_new">
<span class="ui-icon ui-icon-plus"></span>new
</button>
jquery代码：
$('#btn_new').click(function({
$(this).find('span').toggleClass('ui-icon-plus ui-icon-tick');
});
我也尝试过这个：
$('#btn_new').click(function({
$(this).find('span').removeClass('ui-icon-plus').addClass('ui-icon-tick');
});