jQuery.addClass(）不起作用
jQuery.addClass() is not working
我的addClass()有问题。不知怎么的，它不适用于这个例子：
https://jsfiddle.net/0g1Lvk2j/20/
滚动到最后，单击橙色框关闭最后一个框。通过从封闭框中移除类photo-src-as-main并将其添加到第一个可见框中，封闭框的橙色边框应转移到另一个可见框。然而，它不起作用！
<div class="photo fn-photo-upload grid-25 tablet-grid-50 mobile-grid-100" >
<div class="photo-frame">
<div class="photo-src fn-photo-upload-src">
<div class="pu-btn-container"><span class="text-charcoal">/upload</span></div>
</div>
</div>
</div><div data-form="1" class="photo fn-photo-1 grid-25 tablet-grid-50 mobile-grid-100">
<div class="photo-frame">
<div class="photo-src">
<div class="photo-src-control">
<div class="photo-src-remove "></div>
</div>
</div>
</div>
</div><div data-form="2" class="photo fn-photo-2 grid-25 tablet-grid-50 mobile-grid-100">
<div class="photo-frame">
<div class="photo-src">
<div class="photo-src-control">
<div class="photo-src-remove "></div>
</div>
</div>
</div>
</div><div data-form="3" class="photo fn-photo-3 grid-25 tablet-grid-50 mobile-grid-100 ">
<div class="photo-frame">
<div class="photo-src">
<div class="photo-src-control">
<div class="photo-src-remove "></div>
</div>
</div>
</div>
</div><div data-form="4" class="photo fn-photo-4 grid-25 tablet-grid-50 mobile-grid-100 display-none">
<div class="photo-frame">
<div class="photo-src">
<div class="photo-src-control">
<div class="photo-src-remove "></div>
</div>
</div>
</div>
</div><div data-form="5" class="photo fn-photo-5 grid-25 tablet-grid-50 mobile-grid-100">
<div class="photo-frame photo-src-as-main">
<div class="photo-src">
<div class="photo-src-control">
<div class="photo-src-remove "></div>
</div>
</div>
</div>
</div><div data-form="6" class="photo fn-photo-6 grid-25 tablet-grid-50 mobile-grid-100 display-none">
<div class="photo-frame">
<div class="photo-src">
<div class="photo-src-control">
<div class="photo-src-remove "></div>
</div>
</div>
</div>
</div><div data-form="7" class="photo fn-photo-7 grid-25 tablet-grid-50 mobile-grid-100 display-none">
<div class="photo-frame">
<div class="photo-src">
<div class="photo-src-control">
<div class="photo-src-remove "></div>
</div>
</div>
</div>
</div>
HTML:
<div class="photo fn-photo-upload grid-25 tablet-grid-50 mobile-grid-100" >
<div class="photo-frame">
<div class="photo-src fn-photo-upload-src">
<div class="pu-btn-container"><span class="text-charcoal">/upload</span></div>
</div>
</div>
</div><div data-form="1" class="photo fn-photo-1 grid-25 tablet-grid-50 mobile-grid-100">
<div class="photo-frame">
<div class="photo-src">
<div class="photo-src-control">
<div class="photo-src-remove "></div>
</div>
</div>
</div>
</div><div data-form="2" class="photo fn-photo-2 grid-25 tablet-grid-50 mobile-grid-100">
<div class="photo-frame">
<div class="photo-src">
<div class="photo-src-control">
<div class="photo-src-remove "></div>
</div>
</div>
</div>
</div><div data-form="3" class="photo fn-photo-3 grid-25 tablet-grid-50 mobile-grid-100 ">
<div class="photo-frame">
<div class="photo-src">
<div class="photo-src-control">
<div class="photo-src-remove "></div>
</div>
</div>
</div>
</div><div data-form="4" class="photo fn-photo-4 grid-25 tablet-grid-50 mobile-grid-100 display-none">
<div class="photo-frame">
<div class="photo-src">
<div class="photo-src-control">
<div class="photo-src-remove "></div>
</div>
</div>
</div>
</div><div data-form="5" class="photo fn-photo-5 grid-25 tablet-grid-50 mobile-grid-100">
<div class="photo-frame photo-src-as-main">
<div class="photo-src">
<div class="photo-src-control">
<div class="photo-src-remove "></div>
</div>
</div>
</div>
</div><div data-form="6" class="photo fn-photo-6 grid-25 tablet-grid-50 mobile-grid-100 display-none">
<div class="photo-frame">
<div class="photo-src">
<div class="photo-src-control">
<div class="photo-src-remove "></div>
</div>
</div>
</div>
</div><div data-form="7" class="photo fn-photo-7 grid-25 tablet-grid-50 mobile-grid-100 display-none">
<div class="photo-frame">
<div class="photo-src">
<div class="photo-src-control">
<div class="photo-src-remove "></div>
</div>
</div>
</div>
</div>
CSS
.display-none{
display:none;
}
.photo-src-control{
width: 40px;
height: 40px;
background-color: orange;
cursor: pointer;
}
/*.photo-src-main{
background: url('img/star.png') no-repeat center #c0c0c0;
}
.photo-src-main:hover{
background-color: gold;
}*/
.photo-src-remove{
width: 40px;
height: 40px;
}
.photo-src-remove:hover{
background-color: red;
}
.photo .photo-src{
/* border: 3px dashed #D2D2D2; */
background-color: white;
width:100%;
height: 100%;
background-image: url("img.png");
background-repeat: no-repeat;
background-position: center 40%;
position: relative;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
border-radius: 3px;
}
.photo-frame{
width: 95%;
margin: 5% auto;
padding:3px;
height: 200px;
border-radius: 3px;
}
.fn-photo-upload{
background-image: url("img.png");
background-repeat: no-repeat;
background-position: center 40%;
cursor: pointer;
}
.photo-loading .photo-src{
background-image: url("imgLoader.gif")!important;
background-position: center!important;
}
.photo-loading .photo-src-control{
display: none;
}
.pu-btn-container{
position: absolute;
bottom: 25%;
width:100%;
}
.pu-btn-container span{
width: 100px;
margin: 0 auto;
display: block;
text-align: center;
}
.pu-form{
width:0;
height:0;
border:0px solid #fff;
overflow: hidden;
position: absolute;
}
.photo-src-as-main{
background: #DC7416;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
}
/*.photo-src-as-main .photo-src-main{
background-color: #DC7416;
}*/
.photo-src-as-main .photo-src{
box-shadow:none!important;
}
javascript/jquery
$(document).ready(function(){
$(".photo-src-remove").click(function(){
var photo=$(this).parents().eq(3);
var photoFrame=$(this).parents().eq(2);
photo.addClass("display-none");
if (photoFrame.hasClass("photo-src-as-main")) {
//I dont understand why it refuses to add and remove this classname
$(".photo").not(".fn-photo-upload,.display-none").find(".photo-frame").eq(0).addClass("photo-src-as-main")
photoFrame.removeClass("photo-src-as-main");
}
})
$(".photo-src").not(".fn-photo-upload-src").click(function(){
$(".photo-frame").removeClass("photo-src-as-main")
$(this).parent().addClass("photo-src-as-main")
})
})
我认为问题是，当你点击橙色正方形的"photo-src-remove"元素时，两个你的"点击"处理程序都会启动。它的父元素是一个"photo-src"元素，所以点击会冒泡。因此，您的代码确实按照您的意愿添加了"photo-src as main"，但随后其他点击处理程序会立即将其删除
您可以取消事件冒泡以修复此问题：
$(".photo-src-remove").click(function(e){
e.stopPropagation(); // <=== stop bubbling
var photo=$(this).parents().eq(3);
var photoFrame=$(this).parents().eq(2);
photo.addClass("display-none");
if (photoFrame.hasClass("photo-src-as-main")) {
//I dont understand why it refuses to add and remove this classname
$(".photo").not(".fn-photo-upload,.display-none").find(".photo-frame:first").addClass("photo-src-as-main")
photoFrame.removeClass("photo-src-as-main");
}
})
我强烈建议使用.closest()显式地按类名搜索目标父级，而不是按.parents()链（如.parents().eq(2)）的嵌套深度进行导航。使用DOM结构是非常脆弱的。
您肯定没有得到正确的元素。我试着这样做，效果很好。我知道这很难看，但问题不在于add/remove类，而是在选择时返回的元素。
$(".photo-src").not(".fn-photo-upload-src").click(function(){
$(".photo-frame").removeClass("photo-src-as-main")
var frameList = $(".photo-frame").filter(':visible');
$(frameList[frameList.length - 1]).addClass("photo-src-as-main")
})
相关文章：
- $animate addClass在angular 1.3中不起作用
- jQuery.addClass(）不起作用
- JQuery addclass 在 AJAX 调用上不起作用
- jQuery AddClass 方法不起作用
- addClass 不起作用，尝试根据 URL 添加类
- jQuery - 'addClass' to HTML 元素 - 不起作用，但在 Chrome 中正确显
- .addClass(） 在使用 if-语句时不起作用
- JQuery addClass 在 Firefox 中不起作用
- addclass 函数在 Firefox 和 IE 中不起作用
- jQuery .addclass 在 wordpress 中不起作用
- 简单的jQuery addClass(）似乎不起作用
- jQuery addClass 在 IE 7 或 IE 8 中不起作用
- $(this）.addClass不起作用
- DOM元素addclass在IE7中不起作用
- Delegate和AddClass不起作用
- addClass(）不起作用
- addClass(）在mouseenter(）中不起作用
- toggleClass做'不起作用，但addClass起作用
- .addClass(）在JS Fiddle之外不起作用
- 为什么addClass(）不起作用?使用mCustomScrollbar
