나는 벽돌을 가지고 있으며 때로는 벽돌 항목에 'open'클래스가 있습니다. 일부 mansory-item이 열려있을 때만 벽돌 클래스의 불투명도를 추가하고 싶습니다. mansory-item 자식이 오픈 클래스가 없다면 mansory는 클래스 불투명도를 가져야합니다. If statment는 첫 번째 부분 만 작동하지만 해결 방법을 모르겠습니다. 편집하고 업데이트했습니다.
$("masonry-item .bottom-line").click(function () {
$('masonry-item.open').not($(this).parent()).removeClass('open');
$(this).parent().toggleClass('open');
$('masonry-item').each(
function(){
if ($(this).has('.open')){
$(this).parent().addClass('error');
} else {
$(this).parent().removeClass('error');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="masonry">
<div class="masonry-item"></div>
<div class="masonry-item"></div>
</div>
코드에서 그들 중 하나에 클래스 중 하나가 있거나없는 경우 부모가 설정됩니다-.some 또는 유사한 것을 사용하려는 경우
div를 클릭하면 div가 열리고 컨테이너가 클래스를 변경해야하는지 테스트합니다.
외부를 클릭하면 열린 수업이 제거됩니다.
$(function() {
const $container = $('.masonry');
const testOpen = () => {
$container.toggleClass("error",
$container.find(".open").length > 0
);
}
$('.masonry-item').on("click", function() {
$(this).toggleClass("open");
testOpen()
});
$(document).on("click", function(e) {
if (!$container.is(e.target) && $container.has(e.target).length === 0) {
$container.find(".open").removeClass("open");
testOpen()
}
});
});
.error {
color: red;
border: 1px solid black;
display: inline-block;
}
.open {
font-weight: bold;
text-decoration: underline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="masonry">
<div class="masonry-item">One</div>
<div class="masonry-item">Two</div>
<div class="masonry-item">Three</div>
<div class="masonry-item">Four</div>
</div>
outside
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다