깃발 이미지에 따라 div를 표시했습니다.

Question

그래서 현재 4 개의 div 중 하나를 표시하고자하는 4 개의 플래그가 있습니다. 예를 들어 프랑스 국기를 클릭하면 프랑스어 콘텐츠를 표시하고 다른 언어 div 등을 숨기려고합니다.

현재 프랑스, ​​독일어, 영어 및 네덜란드어의 ID가 4 개인 플래그가 있고 내가 클릭 한 플래그의 ID를 얻고 그 이름을 사용하여 표시된 div를 토글합니다.

$("img").click(function() { 
var myClass = $(this).attr("id"); 

    $('div.' + myClass).toggle(); 

}); 
}); 

div의 관련 클래스는 영어, 네덜란드어, 독일어 및 프랑스어라고도합니다.

내가 겪고있는 문제는 페이지가 4 개의 div로 가득 차서 클릭하지 않은 div를 숨길 수 있다는 것입니다!

감사합니다.

Answer 1

클래스는 고정하고 다른 해결책이 <div class="flag english">...</div>처럼 모든 4 개 된 div에 그럼 당신은 기본적으로 찾고

var $divs = $('.flag'); 
$("img").click(function() { 
    var $div = $divs.filter('.' + this.id).toggle(); 
    $divs.not($div).hide() 

}); 
}); 

Answer 2

을 flag라는 또 다른 클래스를 추가하는 것입니다

var $divs = $('.english, .dutch, .german, .french'); 
$("img").click(function() { 
    var myClass = this.id; 
    var $div = $('div.' + myClass).toggle(); 

    $divs.not($div).hide() 

}); 
}); 

다음 english, dutch, german and french라고 불리는 경우 간단한 탭 기능을 위해 마크 업을 재고하고 클래스를 사용하여 플래그와 언어를 모두 정의합니다. 이처럼 :

HTML

<div class="flag english" data-language="english">E</div> 
<div class="flag dutch" data-language="dutch">D</div> 
<div class="flag german" data-language="german">G</div> 
<div class="flag french" data-language="french">F</div> 

<article class="language english show"> 
    English content 
</article> 
<article class="language dutch"> 
    Nederlandse inhoud 
</article > 
<article class="language german"> 
    Deutsch Inhalt 
</article> 
<article class="language french"> 
    Contenu en français 
</article> 

자바 스크립트

var langs = $(".language"); 
var flags = $(".flag"); 
flags.on("click", function(e){ 
    var lang = $(this).data("language"); 
    langs.filter(".show").removeClass("show"); 
    langs.filter("." + lang).addClass("show"); 
}); 

test case on jsFiddle를 참조하십시오.

Answer 3

는 다음과 같이

<div class="english lang">...</div> 
<div class="german lang">...</div> 

$("img").click(function() { 
    var myClass = $(this).attr("id"); 
    $('div.lang').hide(); 
    $('div.' + myClass).show(); 
});