如果element hasClass则更改后台文件

时间:2012-08-16 09:49:49

标签: javascript jquery

嗨我需要写if if语句检查span是否有类“nie”,如果是这样它应该更改后台文件但我的语句设置每个第一个bg文件“bg-nie.png”,有什么问题?

jQuery代码

if ($(".rzuty span.mieszkanie").hasClass("nie")) {
        $(".rzuty span.mieszkanie").css("background", "url(img/rzuty/mieszkania/bg-nie.png) repeat");
    } else {
        $(".rzuty span.mieszkanie").css("background", "url(img/rzuty/mieszkania/bg-tak.png) repeat");
    }

HTML

<div id="rzuty07p" class="rzuty">
    <span id="c_07_226" class="mieszkanie" title=""></span>
    <span id="c_07_228" class="mieszkanie" title=""></span>
    <span id="c_07_227a" class="mieszkanie" title=""></span>
    <span id="c_07_227b" class="mieszkanie" title=""></span>
    <span id="c_07_229" class="mieszkanie nie" title=""></span>
    <span id="c_07_005" class="mieszkanie" title=""></span>
    <span id="c_07_006" class="mieszkanie" title=""></span>
    <span id="c_07_008" class="mieszkanie" title=""></span>
    <span id="c_07_007a" class="mieszkanie nie" title=""></span>
    <span id="c_07_007b" class="mieszkanie nie" title=""></span>
</div>

3 个答案:

答案 0 :(得分:5)

这可以简化为不需要if语句。只需进一步过滤您的选择:

var $rzutyspan = $(".rzuty span.mieszkanie");
$rzutyspan.filter(".nie").css("background", "url(img/rzuty/mieszkania/bg-nie.png) repeat");
$rzutyspan.not(".nie").css("background", "url(img/rzuty/mieszkania/bg-tak.png) repeat");

请参阅演示:http://jsfiddle.net/4A4W7/


或者,这可以通过纯CSS实现:

.rzuty span.mieszkanie
{
   background: url(img/rzuty/mieszkania/bg-tak.png) repeat;
}
.rzuty span.mieszkanie.nie
{
   background: url(img/rzuty/mieszkania/bg-nie.png) repeat;
}

答案 1 :(得分:1)

好吧,您正在使用公共类.mieszkanie来检查和操作匹配的所有集合。单独检查和操作:

$(".rzuty span.mieszkanie").each(function(k,v) {
    if ($(this).hasClass("nie")) {
        $(this).css("background", "url(img/rzuty/mieszkania/bg-nie.png) repeat");
    } else {
        $(this).css("background", "url(img/rzuty/mieszkania/bg-tak.png) repeat");
    }
});

答案 2 :(得分:0)

这是一种方法: http://jsfiddle.net/xoreznik/kC5L2/

您在选择器上使用if语句,在这种情况下将返回多个对象。 在附带的小提琴中,您可以看到如何定位具有/不具有目标类的任何元素并将css应用于它。