jQuery - 동일한 클래스 이름을 사용하여 항목을 개별적으로 표시/숨기기

jQuery와 함께 극단적 인 놈입니다.jQuery - 동일한 클래스 이름을 사용하여 항목을 개별적으로 표시/숨기기

다른 항목을 표시하지 않고 해당 링크를 기반으로 항목을 표시하려고합니다. 내 모든 링크는 동일한 클래스 이름과 범위를가집니다.

이 작업을 수행 할 수 있는지 여부는 알 수 없습니다. 너무 오랫동안 내 머리를 고생 시켰습니다.

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<title>jQuery - Show/Hide items individually with same class name</title> 

<style type="text/css"> 
* { outline: none; } 
a { display: inline-block; margin-right: 10px; float: left; text-decoration: none;  padding: 10px; } 
span { text-align: center; display: inline; padding: 20px; background: blue; color: #fff; float: left; margin-right: 20px; width: 120px; } 
div#wrap { float: left; clear: left; margin-top: 10px; } 
div#linkOne, div#linkTwo, div#linkThree { background: #ccc; display: inline-block;  float: left; margin-right: 20px; } 
</style> 

<script type="text/javascript"> 

    $(document).ready(function(){ 

     var spans = $("span").each(function(j){ $(this).attr({class : "myDiv" + j}) }); 
     $(spans).hide(); 

     $(".show").each(function(i){ 
     $(this).attr({class : "show" + i}); 
     $(this).bind("click", function(e){ 
     $(spans).show(); 
     }); 
     }); 

     $(".hide").click(function(){ 
     $(spans).hide(); 
     }); 

    }); 

</script> 
</head> 

<body> 
    <div id="linkOne"> 
    <a class="show" href="#">Show1</a> 
    <a class="hide" href="#">Hide1</a> 
    </div> 
    <div id="linkTwo"> 
    <a class="show" href="#">Show2</a> 
    <a class="hide" href="#">Hide2</a> 
    </div> 
    <div id="linkThree"> 
    <a class="show" href="#">Show3</a> 
    <a class="hide" href="#">Hide3</a> 
    </div> 

    <div id="wrap"> 
    <span class="myDiv">div1</span> 
    <span class="myDiv">div2</span> 
    <span class="myDiv">div3</span> 
    </div> 

</body> 
</html>

출처

2009-09-26 Scott

아마 VAR 걸쳐 = $ ("스팬"). 각 (함수 (j) {$ (이) .addClass ("myDiv"+ J)}) ; –

열려는 범위에 링크 div의 다른 ID를 추가하십시오.

$(function(){ 
    // First hide all hide links initially. 
    $(".hide").hide(); 

    // then attach hide handler 
    $(".hide").bind("click", function(){ 
     $(this).siblings(".show").show(); 
     $(this).hide(); 
     $(".myDiv." + $(this).attr("id")).show(); 
    }); 

    // and the show handler 
    $(".show").bind("click", function(){ 
     $(this).siblings(".hide").show(); 
     $(this).hide(); 
     $(".myDiv." + $(this).attr("id")).hide(); 
    }); 
});

HTH 알렉스

변화 div1 div1 에

그런 다음 jQuery를 마법을 추가

출처

2009-09-26 11:59:40

와우 ... 덕분에 많은 알렉스. 그 트릭을 했어! – Scott

내가 당신을 이해 확실하지 않다 :

여기에 코드입니다. 하지만 $ ('# linkOne .hide')는 예를 들어 #linkOne의 자식 인 'hide'클래스가있는 요소 만 선택합니다.

출처

2009-09-26 11:56:38

이것이 원하는 것입니까?

업데이트 이제 쇼 링크를 보여주고 이에 따라 토글하고 이에 따라 컨텐트 (.myDiv)를 전환합니다.

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('.myDiv').hide(); 
     $('.hide').hide(); 

     $('.show').click(function() { 
     $(this).hide(); 
     $('.hide:eq(' + $('a.show').index(this) + ')').show(); 
     $('.myDiv:eq(' + $('a.show').index(this) + ')').show(); 
     }); 

     $('.hide').click(function() { 
     $(this).hide(); 
     $('.show:eq(' + $('a.hide').index(this) + ')').show(); 
     $('.myDiv:eq(' + $('a.hide').index(this) + ')').hide(); 
     }); 
    }); 
</script>

출처

2009-09-26 12:09:42

그래,하지만 당신은뿐만 아니라 링크를 표시/숨기기 처리해야합니다. – tvanfosson

해당 항목을 포함하도록 업데이트 됨 –

간단한 해결책은 다음과 같습니다만큼 당신의 연결이 당신의 스팬와 같은 순서로 그대로

$(".show").each(function(i){ 
    $(this).attr({class : "show" + i}); 
    $(this).bind("click", function(e){ 
     $(".myDiv" + i).show(); 
    }); 
});

출처

2009-09-26 12:09:55

, 당신은 클래스와 특별한 "마법"없이 의해 얻을 수 있어야합니다 이름 :

래퍼에서 올바른 범위를 선택하려면 링크 순서를 사용하십시오.

$(document).ready(function(){ 

    $('#wrap span').hide(); 

    $(".show").click(function() { 
     var index = $('.show').index(this); 
     $('#wrap span').eq(index).show(); 
     $(this).hide(); 
     $(this).siblings('.hide').show(); 
    }); 

    $(".hide").click(function(){ 
     var index = $('.hide').index(this); 
     $('#wrap span').eq(index).hide(); 
     $(this).hide(); 
     $(this).siblings('.show').show(); 
    }); 

});

명명 된 div 대신 링크 클래스로 변경하십시오.

<div class="link"> 
    <a class="show" href="#">Show1</a> 
    <a class="hide" href="#">Hide1</a> 
</div> 
<div class="link"> 
    <a class="show" href="#">Show2</a> 
    <a class="hide" href="#">Hide2</a> 
</div> 
<div class="link"> 
    <a class="show" href="#">Show3</a> 
    <a class="hide" href="#">Hide3</a> 
</div>

div1 DIV2 div3

출처

2009-09-26 12:17:46 tvanfosson

jQuery - 동일한 클래스 이름을 사용하여 항목을 개별적으로 표시/숨기기

답변

관련 문제