2017-11-17 2 views
1

CSS 클래스에 중국어 클래스 이름을 사용할 수 있습니까? jQuery와 함께 중국어 단어를 얻으려고하고 나서 중국어 단어로 명명 된 클래스로 img 요소를 만듭니다.CSS 클래스 이름에 중국어 문자를 사용할 수 있습니까?

예를 들어 2020_Cars_哈喽_1.jpg이라는 파일이 있는데, 앨범, 카테고리 (자동차) 및 중국어 단어를 사용하는 코드를 만들고 다음과 같이 클래스를 사용하여 img 요소를 만듭니다. 나중에 이미지를 필터링하기 위해 파일 이름.

here 나는 문제없이 클래스로 번역 된 카테고리를 볼 수 있으며 %46%bd%은 성공적으로 클래스 이름으로 변환 할 수없는 중국어 단어입니다.

제안 사항을 알려주십시오.

파일 이름을 사용하고 클래스로 분할 JQuery와 코드 :

$.ajax({ 
    url: dir, 
    success: function(data){ 
     $(data).find("a:contains(.JPG)").each(function(){ 
      // will loop through 
      var images = $(this).attr("href"); 
      var splittedName = images.split('_'); 
      var classesToAdd = 'thumbnailpic'; 
      for(var i=0;i<3;i++){ 
       classesToAdd+=' '+splittedName[i]; 
      } 

      if(years.indexOf(splittedName[0])===-1){ 
       years.push(splittedName[0]); 
      } 
      if(categories.indexOf(splittedName[1])===-1) { 
       categories.push(splittedName[1]); 
      } 
      if(albums.indexOf(splittedName[2])===-1) { 
       albums.push(splittedName[2]); 
      } 

      $('.gallery').append('<img class="'+classesToAdd+'" src="'+dir+'/'+images+'"'+'>'); 

     }); 

     for(var a=0;a<years.length;a++){ 
      $('.years').append('<div id="filter-button" class="filter-select" >'+years[a]+'</div>'); 
     } 

     for(var b=0;b<categories.length;b++){ 
      $('.categories').append('<div id="filter-button" class="filter-select">'+categories[b]+'</div>'); 
     } 

     for(var c=0;c<albums.length;c++){ 
      $('.albums').append('<div id="filter-button" class="filter-select">'+albums[c]+'</div>'); 
     } 
     hideBigPic(); 
     $('.filters').fadeIn(1000); 
     $('.gallery').fadeIn(1000); 
    } 
}); 

사전에 감사합니다!

+0

[CSS 클래스 이름/선택기에 사용할 수있는 문자는 무엇입니까?] 가능한 복제본 (https://stackoverflow.com/questions/448981/which-characters-are-valid-in-css-class-names-selectors) –

답변

2

예, 중국어 문자를 클래스 이름 및 선택기로 사용할 수 있습니다.

div { 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
.tomato { 
 
    background: tomato; 
 
} 
 

 
.蓝色 { 
 
    background: navy; 
 
}
<div class="蓝色"></div> 
 
<div class="tomato"></div> 
 
<br> 
 
<button onclick="console.log(document.querySelector('.蓝色'))">Find Element</button>

그러나 여기 진짜 문제처럼 보이는 방법이 실제 문자로 다시 URL 인코딩 된 문자 (등 % 46)를 설정하고 그것을 위해 당신이 decodeURIComponent

console.log(decodeURIComponent('%E8%93%9D'))
을해야합니까

희망 사항 유언장.

+0

은 매력처럼 작동합니다! 정말 고맙습니다! – holyubuntu

관련 문제