를 li.bc-cate-has-child.first클릭 하면 요소를 표시 a.bc-pagination-next하고을 클릭하면 숨기고 싶습니다 a.bc-pagination-next.
아래 스크립트는 작동하지만 클릭하면 두 컨테이너에서 일치하는 모든 요소가 표시되거나 숨겨집니다. 클릭을 유지하여 상위 컨테이너의 요소에만 영향을 줄 수 있습니까?
스크립트:
$(document).ready(function () {
$('.bc-list-wrap').each(function () {
$("a.bc-pagination-next").click(function () {
$("li.bc-cate-has-child.first").hide();
})
$("a.bc-pagination-prev").click(function () {
$("li.bc-cate-has-child.first").show();
})
});
});
HTML :
<div class="bc-list-wrap">
<ul class="bc-list bc-ul bc-list-not-standard">
<li class="bc-cate-has-child first" style="display: none;">
</li>
</ul>
<div class="bc-pagination">
<a class="bc-pagination-next">next</a>
<a class="bc-pagination-prev">prev</a>
</div>
</div>
<div class="bc-list-wrap">
<ul class="bc-list bc-ul bc-list-not-standard">
<li class="bc-cate-has-child first" style="display: none;">
</li>
</ul>
<div class="bc-pagination">
<a class="bc-pagination-next">next</a>
<a class="bc-pagination-prev">prev</a>
</div>
</div>
현재 요소 컨텍스트를 사용 this하고 DOM을 트래버스하여 원하는 요소를 대상으로 한 다음 필요한 작업을 수행해야합니다.
당신은 사용할 수 있습니다 .closest()나중에 공통 조상까지 travese 위해 .find()요소를 대상으로 사용할 수 있습니다.
$(document).ready(function () {
$('.bc-list-wrap').on("click", "a.bc-pagination-next", function () {
$(this).closest('.bc-list-wrap').find("li.bc-cate-has-child.first").hide();
})
$('.bc-list-wrap').on("click", "a.bc-pagination-prev", function () {
$(this).closest('.bc-list-wrap').find("li.bc-cate-has-child.first").show();
})
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다