Kami memasukkan nama warna dalam kode sebagai: Hitam, Hijau.

Dan kami menyimpan gambar di server sebagai: black.png, green.png

Di situs alih-alih nama warna, itu menampilkan gambar terkait.

Sekarang kita perlu memasukkan warna sebagai "Bright Pink**, untuk itu ketika kita memberi nama warna pink cerah.png di server, itu tidak menampilkan gambar di situs.

Masalah: Untuk satu warna kata, itu menampilkan gambar, tetapi tidak untuk 2 warna kata.

Naskah:

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+')');
        }
    }
});
0
user6619012 10 Maret 2017, 10:40

2 jawaban

Jawaban Terbaik

Spasi tidak diperbolehkan di URL. Jadi encode spasi dengan nama file yang seharusnya berfungsi

Mencoba

   classN = encodeURIComponent(classN.toLowerCase());
0
Bhuwan 10 Maret 2017, 07:54

Anda mungkin perlu menghindari (persen-encode) spasi di URL Anda sebagai %20 menggunakan:

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

Jika Anda mengeposkan HTML, saya dapat menambahkannya ke cuplikan di bawah untuk memverifikasi kebenarannya. Saya juga membuat beberapa perubahan menggunakan ekspresi reguler dan fungsi utilitas jQuery untuk membantu mengurangi ukuran kode Anda; tolong beri tahu saya jika Anda memiliki pertanyaan.

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>
0
gyre 10 Maret 2017, 07:54