Question

如果启用或禁用图像，我需要检查背景图像，我设置了一些样本：

<a id="heart" href="" style="position: absolute; left: 0px; top: 0px; width: 20px; height: 20px; font-size: 20px; background-image: url(http://localhost:1268/Selecciona/IMG/heart_disabled.png); background-repeat: no-repeat;"></a>

<a id="heart" href=""  style="position: absolute; left: 0px; top: 0px; width: 20px; height: 20px; font-size: 20px; background-image: url(http://localhost:1268/Selecciona/IMG/heart_enabled.png); background-repeat: no-repeat;"></a>

<a id="heart" href="" style="position: absolute; left: 0px; top: 0px; width: 20px; height: 20px; font-size: 20px; background-image: url(http://localhost:1268/Selecciona/IMG/heart_disabled.png); background-repeat: no-repeat;"></a>

可以在jQuery中使用吗？

Answer 1

$('a').each(function(){
    // check if the image source contains the word 'enabled'
    var bgEnabled = $(this).css('background-image').indexOf('enabled') !== -1;
    
    alert('<a> #' + $(this).index() + ' is ' + (bgEnabled ? 'enabled' : 'disabled'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<a class="heart" href="" style="position: absolute; left: 0px; top: 0px; width: 20px; height: 20px; font-size: 20px; background-image: url(http://localhost:1268/Selecciona/IMG/heart_disabled.png); background-repeat: no-repeat;"></a>

<a class="heart" href=""  style="position: absolute; left: 0px; top: 0px; width: 20px; height: 20px; font-size: 20px; background-image: url(http://localhost:1268/Selecciona/IMG/heart_enabled.png); background-repeat: no-repeat;"></a>

<a class="heart" href="" style="position: absolute; left: 0px; top: 0px; width: 20px; height: 20px; font-size: 20px; background-image: url(http://localhost:1268/Selecciona/IMG/heart_disabled.png); background-repeat: no-repeat;"></a>

Answer 2

$("#heart").css('background-image');

或使用js

alert(document.getElementById("diva").style.backgroundImage);
//the result of this is url("http://localhost:1268/Selecciona/IMG/heart_disabled.png");

//to show only the url, just substring it like this
url= document.getElementById("diva").style.backgroundImage;
alert(url.substring(4, url.length-1));
// and the result is http://localhost:1268/Selecciona/IMG/heart_disabled.png

Answer 3

您还可以将.filter()与.css()：

结合使用

$("a").filter(function() {
    return $(this).css("background-image").indexOf('enabled') > 0;
}).css("border", "1px solid blue");

/* Or the other way round... */

$("a").filter(function() {
    return $(this).css("background-image").indexOf('disabled') > 0;
}).css("border", "1px solid red");

a { background-color: #ccc; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="heart1" href="" style="position: absolute; left: 0px; top: 0px; width: 20px; height: 20px; font-size: 20px; background-image: url(http://localhost:1268/Selecciona/IMG/heart_disabled.png); background-repeat: no-repeat;"></a>
<a id="heart2" href=""  style="position: absolute; left: 50px; top: 0px; width: 20px; height: 20px; font-size: 20px; background-image: url(http://localhost:1268/Selecciona/IMG/heart_enabled.png); background-repeat: no-repeat;"></a>
<a id="heart3" href="" style="position: absolute; left: 100px; top: 0px; width: 20px; height: 20px; font-size: 20px; background-image: url(http://localhost:1268/Selecciona/IMG/heart_disabled.png); background-repeat: no-repeat;"></a>

如何检查<a> tag?</a>上的CSS属性

3 个答案: