여러 div를 표시하거나 숨기는 더 나은 방법은 무엇입니까?

나는 8 개의 링크를 모두 클릭하면 div를 표시해야합니다. 한 번에 하나의 div 만 표시하면 새 링크를 클릭하면 현재 표시된 div가 숨겨지고 새 것이 표시됩니다. 지금까지 작동하는 jQuery 솔루션이 있지만 추한 것 같습니다. 내가 원하는 것을 성취 할 수있는 더 쉽고/더 정확한 방법이 있습니까?여러 div를 표시하거나 숨기는 더 나은 방법은 무엇입니까?

<div> 
<a href="#" class="link">Click Link</a><br /> 
<a href="#" class="link2">Click Link 2</a><br /> 
<a href="#" class="link3">Click Link 3</a><br /> 
<a href="#" class="link4">Click Link 4</a><br /> 
<a href="#" class="link5">Click Link 5</a><br /> 
<a href="#" class="link6">Click Link 6</a><br /> 
<a href="#" class="link7">Click Link 7</a><br /> 
<a href="#" class="link8">Click Link 8</a><br /> 
<div class="testVid hideDiv" style="background:pink; height:200px">Test Vid Div<br /><br /><span class="close">CLOSE</span></div> 
<div class="testVid2 hideDiv" style="background:pink; height:200px">Test Vid Div 2<br /><br /><span class="close2">CLOSE 2</span></div> 
<div class="testVid3 hideDiv" style="background:pink; height:200px">Test Vid Div 3<br /><br /><span class="close3">CLOSE 3</span></div> 
<div class="testVid4 hideDiv" style="background:pink; height:200px">Test Vid Div 4<br /><br /><span class="close4">CLOSE 4</span></div> 
<div class="testVid5 hideDiv" style="background:pink; height:200px">Test Vid Div 5<br /><br /><span class="close5">CLOSE 5</span></div> 
<div class="testVid6 hideDiv" style="background:pink; height:200px">Test Vid Div 6<br /><br /><span class="close6">CLOSE 6</span></div> 
<div class="testVid7 hideDiv" style="background:pink; height:200px">Test Vid Div 7<br /><br /><span class="close7">CLOSE 7</span></div> 
<div class="testVid8 hideDiv" style="background:pink; height:200px">Test Vid Div 8<br /><br /><span class="close8">CLOSE 8</span></div> 

$(document).ready(function(){ 
    $("a.link").click(function(){ 
     $(".testVid").show(); 
     $(".testVid2").hide(); 
     $(".testVid3").hide(); 
     $(".testVid4").hide(); 
     $(".testVid5").hide(); 
     $(".testVid6").hide(); 
     $(".testVid7").hide(); 
     $(".testVid8").hide(); 
    }); 
    $(".close").click(function(){ 
     $(".testVid").hide(); 
     }); 

    $("a.link2").click(function(){ 
     $(".testVid2").show(); 
     $(".testVid").hide(); 
     $(".testVid3").hide(); 
     $(".testVid4").hide(); 
     $(".testVid5").hide(); 
     $(".testVid6").hide(); 
     $(".testVid7").hide(); 
     $(".testVid8").hide(); 
    }); 
    $(".close2").click(function(){ 
     $(".testVid2").hide(); 
     }); 

    $("a.link3").click(function(){ 
     $(".testVid3").show(); 
     $(".testVid2").hide(); 
     $(".testVid").hide(); 
     $(".testVid4").hide(); 
     $(".testVid5").hide(); 
     $(".testVid6").hide(); 
     $(".testVid7").hide(); 
     $(".testVid8").hide(); 
    }); 
    $(".close3").click(function(){ 
     $(".testVid3").hide(); 
     }); 

    $("a.link4").click(function(){ 
     $(".testVid4").show(); 
     $(".testVid2").hide(); 
     $(".testVid3").hide(); 
     $(".testVid").hide(); 
     $(".testVid5").hide(); 
     $(".testVid6").hide(); 
     $(".testVid7").hide(); 
     $(".testVid8").hide(); 
    }); 
    $(".close4").click(function(){ 
     $(".testVid4").hide(); 
     }); 

    $("a.link5").click(function(){ 
     $(".testVid5").show(); 
     $(".testVid2").hide(); 
     $(".testVid3").hide(); 
     $(".testVid4").hide(); 
     $(".testVid").hide(); 
     $(".testVid6").hide(); 
     $(".testVid7").hide(); 
     $(".testVid8").hide(); 
    }); 
    $(".close5").click(function(){ 
     $(".testVid5").hide(); 
     }) 

    ;$("a.link6").click(function(){ 
     $(".testVid6").show(); 
     $(".testVid2").hide(); 
     $(".testVid3").hide(); 
     $(".testVid4").hide(); 
     $(".testVid5").hide(); 
     $(".testVid").hide(); 
     $(".testVid7").hide(); 
     $(".testVid8").hide(); 
    }); 
    $(".close6").click(function(){ 
     $(".testVid6").hide(); 
     }); 

    $("a.link7").click(function(){ 
     $(".testVid7").show(); 
     $(".testVid2").hide(); 
     $(".testVid3").hide(); 
     $(".testVid4").hide(); 
     $(".testVid5").hide(); 
     $(".testVid6").hide(); 
     $(".testVid").hide(); 
     $(".testVid8").hide(); 
    }); 
    $(".close7").click(function(){ 
     $(".testVid7").hide(); 
     }); 

    $("a.link8").click(function(){ 
     $(".testVid8").show(); 
     $(".testVid2").hide(); 
     $(".testVid3").hide(); 
     $(".testVid4").hide(); 
     $(".testVid5").hide(); 
     $(".testVid6").hide(); 
     $(".testVid7").hide(); 
     $(".testVid").hide(); 
    }); 
    $(".close8").click(function(){ 
     $(".testVid8").hide(); 
     }); 
    $(".hideDiv").css('display', 'none'); 
});

Fiddle Here

출처

2011-07-28 ComatoseDuck

jQuery 선택기를 사용합니다. 모든 클래스 속성을 ID 속성으로 변경하고 번호없이 속성에 1을 추가했습니다. 바이올린입니다. 당신의 HTML에서 아무 것도 변경하지 않고

http://jsfiddle.net/BLXWS/7/

출처

2011-07-28 16:17:33

아름다운. 당신은 내게'a [id = "link"]'와'var vid_id = $ (this) .attr ("id")를 설명해 주시겠습니까? replace ("link", "#testVid");'mean so 나는 더 나은 이해를 가질 수 있는가? Ofcourse. – ComatoseDuck

. '[id^= "link"]'는 jQuery 셀렉터로, 기본적으로'link'로 시작하는 ID 속성을 가진 모든'a' 태그를 걸러냅니다. 다음 줄에서 링크 클릭의 ID 속성을 얻고,'link2'라고 말하면 해당 ID를 해당 testVid로 변환합니다. 링크를'# testVid'로 바꾸면 이제는 # testVid2가됩니다. 나는 그것을 단지 숨기거나 표시 할 수있다. 선택기로 작업 할 때 ID 속성을 사용하기를 좋아합니다. 왜냐하면 종종 하나 이상의 클래스를 사용하기를 원하기 때문입니다. –

할당 모든 항목을
이 (같은 셀렉터) 기능 숨기기 모두 한 번 $(".commonClass").click(..)
모든에 클릭 핸들러를 연결 만 보여

$(this)

출처

2011-07-28 15:58:32 Bozho

각 div는 h입니다. ave 클래스와 id. 클래스는 가지고있는 div 유형을 그룹화하는 데 사용해야합니다. ID는 각 div에 고유해야합니다. 당신이 자동차와 다람쥐의 사진을 포함하는 일부의 사진이 포함 된 일부 div가있는 경우

그래서, 당신은 div의

링크와 div의 공통 클래스와

<div class="PhotosCars" id="Car1"></div> 
<div class="PhotosCars" id="Car2"></div> 
<div class="PhotosCars" id="Car3"></div> 
<div class="PhotosSquirrels" id="Squirrels1"></div> 
<div class="PhotosSquirrels" id="Squirrels2"></div> 
<div class="PhotosSquirrels" id="Squirrels3"></div> 

// hide squirrels 
$(".PhotosSquirrels").hide(); 

// hide cars 
$(".PhotosCars").hide(); 

// show single photo 
$("#Car3").show();

출처

2011-07-28 16:01:17

고맙습니다! 나는 옳은 대답의 예 *를 입력하려고했다. (이것은이 질문이 누락 된 것이었다). 이제는 일하고 돈을 벌어 가족을 먹일 수 있습니다. – Malvolio

@Malvolio - 좋은 지적과 권자! 내 열등한 대답을 삭제했습니다. – karim79

내가 옳은 대답을하고 도움을 주었으면 상자를 체크하십시오. jQuery는 멋지다. 웹 사이트의 jQuery 예제에서 새로운 QR 코드 생성기를 확인하십시오. http://www.evikjames.com/ –

나는했습니다 updated your fiddle의 두 클래스가 있어야합니다 ID가있는 숫자로 된 번호가 변경되었습니다 (어쨌든 고유했기 때문에). 이를 통해 다음을 할 수 있습니다.

$(".showlink").click(function(e){ 
    e.preventDefault(); 
    $(".testVid").hide() 
    $("#vid"+$(this).attr("id").replace("link","")).show();  
});

출처

2011-07-28 16:09:59 Litek

당신이 제공 한 솔루션과 업데이트 된 바이올린이 작동하지 않습니다 – ComatoseDuck

죄송합니다. 'preventDefault()'를 잊어 버렸습니다. 편집되고 갱신 된 바이올린. – Litek

솔루션 :

$("a").click(function(){ 
    $('div[class^="testVid"]').hide(); 
    $('div[class="testVid'+ $(this).attr('class').replace(/link/, '') +'"]').show(); 
}); 

$('span[class^="close"]').click(function() { 
    $(this).parent().hide(); 
});

당신이 jQuery Selectors에서 타자를 살펴 제안, 사람들은 당신의 인생을 절약 할 수 있습니다.

출처

2011-07-28 16:24:12

너무 나빠서 2 답을받을 수 없습니다. 나는 셀렉터를 확실히 닦을거야! – ComatoseDuck

연결/처리하려는 요소에 공통된 속성/값을 사용하십시오. 귀하의 경우에는

무엇 귀하의 링크와 div를 함께 관련 그들의 클래스 이름의 일부입니다 (링크 수와 DIV 번호, 그들은 a 및 div 클래스 이름 link1 --> testVid1 내부에 숨겨져 있습니다).

링크와도 관련이 있습니다 (이 경우 클래스 이름의 첫 번째 부분에 초점을 맞 춥니 다). 그래서 당신은 필요한 모든 그들 중 하나이지만 하나에 대한 기능을 클릭하지 마십시오 :

그래서

$('span[class*="close"]')

자바 스크립트/jQuery 코드 (필요 없음에 :

// this selector selects all a tags of which class attribute contains value of "link" 
$('a[class*="link"]')

같은이 된 div를 닫 스팬 간다 정확히 jQuery를 특히 selectors 많은 도움이 될 것입니다 당신과 같은 경우에

$(function() { 
    $('a[class*="link"]').click(function(e){ 
     // prevent default behaviour of anchor tag 
     e.preventDefault(); 
     //reset current selection (hide all divs) 
     $('div[class*="testVid"]').hide(); 
     // get clicked anchor tag number 
     $this = ($(this).attr("class")).replace("link", "testVid"); 
     // find and display div that is related to clicked a element 
     $('.'+$this).show(); 
    }); 

    $('span[class*="close"]').click(function(e){ 
     // prevent default behaviour of anchor element 
     e.preventDefault(); 
     //get parent element of clicked anchor element and hide it 
     $(this).parent('div').hide(); 
    }); 

    });

: 변경 html 코드)이 같이 보입니다.

출처

2011-07-28 16:49:50 Janez

여러 div를 표시하거나 숨기는 더 나은 방법은 무엇입니까?

답변

관련 문제