2017-11-17 10 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'))
が必要なのでしょうかあるようです

これはあなたのqユース。

+0

は魅力的に機能します!どうもありがとうございます! – holyubuntu

関連する問題