テキストに2つの単語が含まれている場合、テキストの代わりにイメージを表示

Question

色の名前をBlack、Greenとして入力しています。

そして、我々は、サーバ内の画像を維持している。代わりに、色の名前、その表示関連画像のサイト​​では

をgreen.png、black.png。 。

今、私たちは明るいピンク」として色を入力する必要が**、我々は、サーバーに色名に明るいpink.pngを与えたときのために、それはサイト内の画像を表示していない

問題：一つの単語の色については、その画像ではなく、2つのワード色の表示

スクリプト：。

jQuery(document).ready(function(){ 
    varinner=Array(); 
    inner=jQuery(".product-options ul.options-list .label>label"); 
    for(i=0;i<inner.length;i++){ 
     varclassN=inner[i].innerText; 
     if(classN=="Black"||classN=="Green"||classN=="Bright Pink"){ 
      inner.eq(i).addClass("colors"); 
      classN=classN.toLowerCase(); 
      varurlB="http://sitename.com/media/catalog/custom/"+classN+".png"; 
      inner.eq(i).css('background-image', 
      'url('+urlB+')'); 
     } 
    } 
}); 

Answer 1

スペースURLで許可されていません。だから、

お時間を

classN = encodeURIComponent(classN.toLowerCase()); 

Answer 2

あなたが使用して（パーセントエンコード）%20としてあなたのURLにスペースエスケープする必要があるかもしれません：

text.replace(/ /g, '%20') 

あなたのHTMLを投稿する場合は、下のスニペットに追加してその正しさを検証できます。また、正規表現とjQueryユーティリティ関数を使用していくつかの変更を加えて、コードのサイズを縮小しました。ご不明な点がございましたらお知らせください。

jQuery.fn.ready(function() { 
 
    var inner = jQuery('.product-options ul.options-list .label > label') 
 
    inner.each(function() { 
 
    var text = this.textContent.toLowerCase() 
 
    if (/^(?:black|green|bright pink)$/.test(text)) { 
 
     var url = 'http://sitename.com/media/catalog/custom/' + text.replace(/ /g, '%20') + '.png' 
 
     jQuery(this).addClass('colors').css('background-image', 'url(' + url + ')') 
 
    } 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>