[RISOLTO] Giocare con i cicli e i bg

PazzoFrontEnd

Utente Attivo
8 Ott 2013
46
0
6
Codice:
                       <ul class="scelta">
                            <li class="left">
                                
                                <div class="imgLeft palla"></div>  
                                  
                                <span>Palla</span>

                            </li>

                            <li class="right">
                               
                                <div class="imgRight trottola"></div>  
                                
                                <span>Trottola</span>

                            </li>
                        </ul>

Codice:
	     $("ul.scelta li div").each(function(){
                    var name_Img = $(this).attr('class').split(' ').slice(-1); //così prendo l'ultima classe 
                    var path_Img= name_Img+'.png';
                    $(this).css({ 
                      "background" : "url('"+path_Img+"') no-repeat left center",
                      "background-size" : "100%"
                  });

                });

Ciao a tutti! Ho un problema jQuery che non riesco a risolvere. Praticamente ho un ul con all'interno due div che in base alla seconda classe (inserita dinamicamente da un altro js) prenderanno un bg definito e dinamico. Per questo motivo ho ciclato i div all'interno dell'ul (in linea di massima saranno sempre due...) e, andando a scomporre il numero delle classi, mi sono preso l'ultima all'interno dell'attributo "class" (nel mio caso "palla" e "trottola"). Premesso che la prima classe non posso assolutamente eliminarla "imgLeft" e "imgRight" perchè mi regolano lo stile, il mio problema è che SE la seconda classe manca (per es. "palla") il div deve avere come bg un'immagine di placeholder ( background: url("placeholder.png") no-repeat; ) dichiarata gia nei css.
Come posso fare lato jquery a far capire sta cosa? allo stato attuale se la seconda classe manca mi sovrascrive l'immagine di placeholder e non mi mette nulla.
Grazie e se avete bisogno di chiarimenti non esitate a chiedere! :)
 
Ciao, potresti fare cosi
Codice:
$("ul.scelta li div").each(function() {

            var path_Img
            var name_Img = $(this).attr('class').split(' ');

            if (name_Img.length > 1) {
                path_Img = name_Img.slice(-1) + '.png';
            } else {
                path_Img = 'placeholder.png';
            }

            $(this).css({
                "background": "url('" + path_Img + "') no-repeat left center",
                "background-size": "100%"
            });

        });
non ho commentato, se hai bisgono chiedi pure
 
"non funziona" non aiuta a capire cosa non funziona
comunque ho provato cosi
HTML:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
    $(document).ready(function() {
        $("ul.scelta li div").each(function() {
            var path_Img
            var name_Img = $(this).attr('class').split(' ');

            if (name_Img.length > 1) {
                path_Img = name_Img.slice(-1) + '.png';
            } else {
                path_Img = 'placeholder.png';
            }

            alert(path_Img);

            $(this).css({
                "background": "url('" + path_Img + "') no-repeat left center",
                "background-size": "100%"
            });
        });
    });
</script>
<ul class="scelta">
    <li class="left">
        <div class="imgLeft"></div>  
        <span>Palla</span>
    </li>
    <li class="right">
        <div class="imgRight trottola"></div>  
        <span>Trottola</span>
    </li>
</ul>
e assegna l'immagine giusta
ho messo un alert per evidenziare quale immagine verrà caricata
 
evvaiii funziona alla grandE! ti ringrazio!..ps non so cosa sia successo prima, che non andava...l importante è che adesso funzioni avrò dimenticato qualcosa! grazie ancora! :)
 

Discussioni simili