<span class='act_inact active'>Active</span><span class='act_inact inactive'>Inactive</span>
.active를 클릭하면 숨김 상태가되고 .inactive가 표시되고 verca가 표시되어야합니다. 이들은 수업이므로 많은 것들이 페이지에 있습니다.인접한 두 스팬의 jQuery 토글링 표시
$('.act_inact').click(function() {
$(this).toggle();
$(this).closest('.act_inact').toggle();
});
이것은 무엇을 의미합니까? next() 및 prev()를 사용하지 않으려면 closest()를 사용하는 것이 좋습니다.
당신은 closest 방법을 오해하고 있습니다.
가장 가까운 방법은 조건에 맞는 요소의 가장 가까운 부모 요소를 반환합니다. 예를 들어 $('td').closest('table')은 td을 직접 포함하는 테이블을 반환합니다.
당신은 후 또는 요소 앞에 가장 가까운 요소를 찾기 위해 :first 선택과 함께 nextAll 또는 prevAll 방법을 사용할 수 있습니다 (테이블이 다른 테이블 안에있는 경우, 가장 안쪽 하나를 반환합니다), 또는 당신은 siblings을 사용할 수 있습니다 메서드를 사용하여 요소의 형제를 모두 찾을 수 있지만 가장 가까운 형제를 찾는 간단한 방법은 없다고 생각합니다.
내가 중첩이 같은 개별 요소의 내부의 모든 togglable 쌍,하는 것이 좋습니다 것입니다 :
<div class="Togglable">
<span class="Active">Hello!</span>
<span class="Inactive">Goodbye!</span>
</div>
그런 다음 그런데
$('.Togglable span').click(function() {
$(this).parent().children().toggle();
});
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("span.adjSpan").toggle(function() {
$("span.active").hide();
$("span.inactive").show();
}, function() {
$("span.inactive").hide();
$("span.active").show();
});
});
</script>
<style type="text/css">
.active {
display: block;
}
.inactive {
display: none;
}
.adjSpan { }
</style>
</head>
<body>
<span class='adjSpan active'>Active</span><span class='adjSpan inactive'>Inactive</span>
</body>
</html>
을 작성할 수 있습니다, 당신이 이름을 변경하는 것이 좋습니다 'act_inact'를'togglable'으로 설정하십시오. – SLaks
좋은 지적 일을했습니다. – stef
구조를 사용해 보았는데 효과가있었습니다. 대신 텍스트 값을 변경하는 것이 좋습니다. – Tebo