Erhalten Hintergrund des Elements durch jQuery

Question

Ich möchte den Hintergrund des Elements LI nach dem Klicken darauf warnen, aber das Skript funktioniert nicht. Was kann das Problem sein?

<li onclick="getVkPhotoUrl()" style="background-image: url(http://lorempixel.com/400/400/people)" class="block"> 
 
    </li> 
 
<li onclick="getVkPhotoUrl()" style="background-image: url(http://lorempixel.com/400/400/food)" class="block"> 
 
    </li> 
 
<li onclick="getVkPhotoUrl()" style="background-image: url(http://lorempixel.com/400/400/food)" class="block"> 
 
    </li> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script> 
 
\t function getVkPhotoUrl(){ 
 
\t \t var bg = $(this).css('background-image'); 
 
     bg = bg.replace('url(','').replace(')',''); 
 
     alert(bg); 
 
\t } 
 
</script>

Answer 1

Ihre HTML ist falsch. li Elemente müssen in den Elementen ul, ol oder menu enthalten sein. Beachten Sie in Ihrem Beispiel this beziehen sich auf das globale Objekt (Fenster). Sie können this an die Funktion übergeben, um auf das DOM-Element zu verweisen. Vermeiden Sie auch Inline-JavaScript und CSS:

$('ul li.block').on('click', function() { 
 
    var bg = $(this).css('background-image'); 
 
    bg = bg.replace('url(', '').replace(')', ''); 
 
    console.log(bg); 
 
});

ul li.block.people { 
 
    background-image: url(http://lorempixel.com/400/400/people); 
 
} 
 
ul li.block.food { 
 
    background-image: url(http://lorempixel.com/400/400/food); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="block people"></li> 
 
    <li class="block food"></li> 
 
    <li class="block food"></li> 
 
</ul>

Referenzen

li element

Answer 2

Änderung Onclick als onclick = yourMethodName(this) und Funktion als yourMethodName(ctrl) und in der Methodendefinition Verwendung ctrl statt this .

<li onclick="getVkPhotoUrl(this)" style="background-image: url(http://lorempixel.com/400/400/people)" class="block"> 
</li> 
<li onclick="getVkPhotoUrl(this)" style="background-image: url(http://lorempixel.com/400/400/food)" class="block"> 
</li> 
<li onclick="getVkPhotoUrl(this)" style="background-image: url(http://lorempixel.com/400/400/food)" class="block"> 
</li> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script> 
function getVkPhotoUrl(ctrl){ 
    var bg = $(ctrl).css('background-image'); 
    bg = bg.replace('url(','').replace(')',''); 
    alert(bg); 
} 
</script>