Question

我正在尝试使用jQuery更新着色if / else，但无论我采用哪种方式，它只是评估和应用第一个if。如果我将所有块都更改为if，则应用最后一个if块。

我做错了什么？

jQuery(function ($) {
    if ($('.profiletype:contains(Nina)')) {
        $('div.profiletype').css("color", "#ee94ae");
        $('div.sds-usermenu').css("color", "#ee94ae");
    }
    if ($('.profiletype:contains(Chica)')) {
        $('div.profiletype').css("color", "#f7a51c");
        $('div.sds-usermenu').css("color", "#f7a51c");
    }
    if ($('.profiletype:contains(Mujer)')) {
        $('div.profiletype').css("color", "#D31E4B");
        $('div.sds-usermenu').css("color", "#D31E4B");
    }
    if ($('.profiletype:contains(Senora)')) {
        $('div.profiletype').css("color", "#647cbd");
        $('div.sds-usermenu').css("color", "#647cbd");
    }
});

Answer 1

$('.profiletype:contains(Nina)')是一个对象，所以即使它的长度为0，它也总是真实的。

如果要测试选择器是否匹配任何元素，则可以使用length属性：

jQuery(function ($) {
    if ($('.profiletype:contains(Nina)').length) {
        $('div.profiletype').css("color", "#ee94ae");
        $('div.sds-usermenu').css("color", "#ee94ae");
    }
    if ($('.profiletype:contains(Chica)').length) {
        $('div.profiletype').css("color", "#f7a51c");
        $('div.sds-usermenu').css("color", "#f7a51c");
    }
    if ($('.profiletype:contains(Mujer)').length) {
        $('div.profiletype').css("color", "#D31E4B");
        $('div.sds-usermenu').css("color", "#D31E4B");
    }
    if ($('.profiletype:contains(Senora)').length) {
        $('div.profiletype').css("color", "#647cbd");
        $('div.sds-usermenu').css("color", "#647cbd");
    }
});

Answer 2

如果您希望使用jquery测试元素是否存在，那么您需要使用的代码是：

if ($('.profiletype:contains(Nina)')[0]) {
    ...
}

这会尝试探索jQuery在找到元素时构造的DOMElement数组的第一个元素。如果没有，则评估为假。

Answer 3

http://jsfiddle.net/vogomatix/uJ3D6/5/

我改变了颜色以使其更清晰....： - ）

HTML：

<div class="sds-block clearfix profiletype">
   <div class="sds-blockcontent">Chica</div>
</div>
<div class="sds-block clearfix profiletype">
    <div class="sds-blockcontent">Nina</div>
</div>
<div class="sds-block clearfix profiletype">
    <div class="sds-blockcontent">Mujer</div>
</div>
<div class="sds-block clearfix profiletype">
    <div class="sds-blockcontent">Senora</div>
</div>

使用Javascript：

jQuery(function ($) {
    $('.profiletype:contains(Nina)').css("color","#ff0000");
    $('.profiletype:contains(Chica)').css("color","#00ff00");
    $('.profiletype:contains(Mujer)').css("color","#0000ff");
    $('.profiletype:contains(Senora)').css("color","#555555");
});

jQuery If / Else没有评估

3 个答案: