我有一个表,所有行都有一个div的单元格,其动态生成的id格式为btn-insertidhere.
当选择表格行时,我想选择此div id,然后删除一个类并将其更改为另一个类.这取决于我想要将按钮图像从添加符号更改为删除符号(单击时).
javascript代码:
$('*[class^=day] tbody tr[id^=band]').live('click', function() {
var DivId = $(this).find('div.add').attr('id');
alert(DivId);
$('DivId').removeClass('add').addClass('del');
$('table#fri_myTimes tbody').append($(this)).fadeIn(1000);
return false;
});
这是动态生成的代码的html片段:
<tr id="band-Modest-Mouse">
<td>Modest Mouse</td>
<td>15:25:00</td>
<td>16:10:00</td>
<td>45</td>
<td><div id="btn-Modest-Mouse" class="add"> </div></td>
</tr>
如您所见,我想将"添加"类更改为删除"类".表格中的所有表格行都是这样生成的,因此您可以看到我已经选择了通配符方法,这似乎有效,因为显示的警报显示了正确的div id.我只需要改变课程!
谢谢!
嘿伙计们,这是最好的方法:
我有一份清单
<ul>
<li>hello</li>
<li>good bye</li>
<li>arrivederci</li>
<li class="selected">dude</li>
<li>whatever</li>
</ul>
最初,一个项目已经应用了一个.selected类.当我将鼠标悬停在其中一个列表项上时,我希望这个列表具有.selected类.所以每个项目应该只在我结束时应用类,一旦我离开项目,类被删除,下一个有类.
我知道这非常容易,但我一直在编写并重写此功能一小时但没有成功:
点击后我想<li>在点击的链接中添加"活动",并从<li>导航栏中的所有其他链接中删除"活动" .
HTML:
<nav>
<ul>
<li><a href="http://0327ea8.netsolhost.com/#home" class="home">Home</a></li>
<li><a href="http://0327ea8.netsolhost.com/blog/" class="blog">Blog</a></li>
<li><a href="http://0327ea8.netsolhost.com/#catalog" class="catalog">Catalog</a></li>
<li><a href="http://0327ea8.netsolhost.com/#authors" class="authors">Authors</a></li>
<li><a href="http://0327ea8.netsolhost.com/#store" class="store">Store</a></li>
</ul>
</nav>
jQuery的:
// NAVBAR ADD ACTIVE
$("nav ul li a").click(function(){
$("nav ul li").removeClass('active');
$(this).stop().animate();
$(this).parent().addClass('active');
});
这是添加类很好但我无法删除它.
我也尝试将它分成单独的功能而没有运气.
我在那里有.stop().animate(),因为我在链接的悬停状态下有一个.animate().
谢谢!
编辑:
这是悬停的jQuery以及我有.stop().animate()的原因
$("nav ul li a, aside ul li.categories a, div.posts div.foot a").hover(function(){
$(this).animate({'backgroundColor' : '#edf5e9'}, 200);
},function() {
$(this).animate({'backgroundColor' : '#ccd4c8'}, 600);
});
我不确定为什么.stop().animate()是错误的.如果我没有.animate(),那么活动类就不会坚持,如果我这样做,活动类就会坚持.
我仍然无法将课程删除: - /
我正在尝试为点击的元素添加一个类.元素已经分配了几个clases,包括一个带边框的clases.
虽然我知道我可以使用removeClass()删除当前的CSS类,但我需要该类提供的其他样式.所以我想知道下面的例子,我不能用addClass()覆盖边框样式是边框是否已经设置了属性？我不想使用内联样式,因为它们不易维护.
CSS:
.dibHighlight{border:1px solid orange;}
JQuery不起作用:
$(this).closest('.drop').addClass('dibHighlight'); // Doesn't work
有效的JQuery:
$(this).closest('.drop').css({ border: "1px solid orange" }); // Works
我正在开发一个移动网站,并希望使用JS只是添加和删除类.因此,为了保持良好和轻松,我不想使用jQuery.
我有以下HTML:
<div id="masthead">
<a href="index.html" title="Home" id="brand">Brand</a>
<a href="#" id="openPrimaryNav">Menu</a>
<ul id="primaryNav" class="">
<li><a href="index.html" title="Home">Home</a></li>
<li><a href="benefits.html" title="Benefits">Benefits</a></li>
<li><a href="features.html" title="Features">Features</a></li>
<li><a href="casestudies.html" title="Case Studies">Case Studies</a></li>
<li><a href="instore.html" title="In Store">In-Store</a></li>
<li><a href="contact.html" title="Contact">Contact Us</a></li>
<li id="closePrimaryNav"><a href="#" title="Contact">Close Menu</a></li>
</ul>
</div>
以及到目前为止的以下JS:
window.onLoad = init;
function init()
{
document.getElementById('openPrimaryNav').onClick = openPrimaryNav();
document.getElementById('closePrimaryNav').onClick = closePrimaryNav();
}
function openPrimaryNav()
{
document.getElementById('primaryNav').className = 'open';
}
function closePrimaryNav()
{
document.getElementById('primaryNav').className = '';
}
我不能让这个工作有人能告诉我我做错了什么吗？提前谢谢了.
基于下面提供的答案的正确JS:
window.onload = init;
function init()
{
document.getElementById('openPrimaryNav').onclick …有没有办法通过jquery添加一个类到包含ul的所有div只有一个列表元素(如div.filter_7).使用jQuery,我需要遍历每个div.list-container并计算列表元素.如果列表元素低于2,那么jquery应该附加一个类.
<div class="filter_group">
<div class="filter-holder filter_1">
<h4>Test</h4>
<div class="list-container">
<ul class="list filter">
<li class="list_id1">list_id1</li>
<li class="list_id2">list_id2</li>
<li class="list_id3">list_id3</li>
<li class="list_id4">list_id4</li>
<li class="list_id5">list_id5</li>
</ul>
</div>
</div>
<div class="filter-holder filter_2">
<h4>Test</h4>
<div class="list-container">
<ul class="list filter">
<li class="list_id11">list_id11</li>
<li class="list_id22">list_id22</li>
<li class="list_id33">list_id33</li>
<li class="list_id44">list_id44</li>
<li class="list_id55">list_id55</li>
</ul>
</div>
</div>
<div class="filter-holder filter_6">
<h4>Test</h4>
<div class="list-container">
<ul class="list filter">
<li class="list_id111">list_id111</li>
<li class="list_id222">list_id222</li>
<li class="list_id555">list_id555</li>
</ul>
</div>
</div>
<div class="filter-holder filter_7">
<h4>Test</h4>
<div class="list-container">
<ul class="list filter">
<li class="list_id1111">list_id1111</li>
<li class="list_id2221">list_id2222</li>
</ul>
</div> …这是HTML:
<a id="docLocked" title="Unlock this document" style="text-decoration: none; cursor: pointer;"><span class="iconfa-lock"></span></a>
单击"图标"时,我需要它删除span元素的类,然后添加另一个类.
这是我的,但它不起作用:
jQuery('#docLocked').click(function () {
jQuery(this).closest('span').removeClass('iconfa-lock');
jQuery(this).closest('span').addClass('iconfa-unlock');
});
我在这做错了什么？
我有一个包含许多div的div.所有这些细分都有许多与特定命名模式匹配的类.我有很多名为"tile1Full","tile1Thumb","BG1Full","BG1Thumb"的课程.所以我的HTML可能看起来像这样:
<div id=parent>
<div>
<div class='tile1Full BG2Full border1'>
</div>
<div>
<div class='tile3ContainerFull border1'>
<div class=tile2x2Full border3></div>
</div>
</div>
我想用名称"Thumb"替换名称中"Full"的所有类,结果如下:
<div id=parent>
<div>
<div class='tile1Thumb BG2Thumb border1'>
</div>
<div>
<div class='tile3ContainerThumb border1'>
<div class=tile2x2Thumb border3></div>
</div>
</div>
这是我想出的:
contents.find('div').each(function (i) {
if ($(this).attr('class')!==undefined)
{
$(this).attr('class',$(this).attr('class').replace(/Full/g,'Thumb'));
}
});
问题是,根据Firefox"Inspect Element",当我查看class属性时,新的类名就在那里.但是,当我查看CSS检查器时,实际上并未应用这些类.它不再像预期的那样应用"Full"类,但它也不适用"Thumb"类.
该类所做的一件事是设置div的宽度和高度.div本身不包含任何内容; 只是背景图像,所以由于没有应用新类,它们的宽度和高度均为0,实际上消失了.
为什么属性检查器会报告它们具有所需的类,但CSS检查器是否显示这些类未应用？
谢谢
我正在努力理解为什么下面的小提琴不起作用？只是想增加一堂课!
刚开始.
谢谢,请不要降级我...我知道它的基本.
HTML:
<ul>
<li class="box">a</li>
<li class="box">b</li>
<li class="box">c</li>
<li class="box">d</li>
</ul>
CSS:
li {
height:20px;
width:20px;
background-color:red;
display:inline-block;
}
li .hover {
background-color:blue;
}
jQuery的:
$('li').addClass('hover');
我有一个jquery脚本,但它很长(我认为)有没有办法让这段代码更短？代码将类添加到按钮和段落,以便它们显示自己的文本,每个按钮都有自己的文本(段落).
我在谈论jquery代码;)但是我可以在需要时更改html和css
$(function() { //run when the DOM is ready
$(".button-case.een").click(function() { //use a class, since your ID gets mangled
$(".button-case.een").toggleClass("active");
$("p.inner-p.een").toggleClass("active"); //add the class to the clicked element
});
$(".button-case.twee").click(function() { //use a class, since your ID gets mangled
$(".button-case.twee").toggleClass("active");
$("p.inner-p.twee").toggleClass("active"); //add the class to the clicked element
});
$(".button-case.drie").click(function() { //use a class, since your ID gets mangled
$(".button-case.drie").toggleClass("active");
$("p.inner-p.drie").toggleClass("active"); //add the class to the clicked element
});
$(".button-case.vier").click(function() { //use a class, since your ID gets …