我遇到了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>
<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>
.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;
}
$(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")
})
})
答案 0 :(得分：4)
我认为问题在于，当您点击橙色方块“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");
}
})
我强烈建议不要通过嵌套.parents()链上的深度（例如.parents().eq(2)）来导航，而是使用.closest()显式搜索目标父级的类名。使用DOM结构非常脆弱。
答案 1 :(得分：0)
你肯定没有得到正确的元素。我试试这样，它的工作原理。我知道非常难看，但问题不在于添加/删除类，而是在选择中返回的元素。
$(".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")
})