Question

我使用javascript根据用户角色隐藏一些列表项。

我从列表项text()获取角色。当我将$("#activeUser").text()值与字符串进行比较时，它不起作用。

我在javascript中使用的HTML块来获取列表项的text（）值。

<ul class="pull-right breadcrumb">
    <li><a href="index.php">Home</a>  <span class="divider">/</span> </li>
    <li id="activeUser" class="active"> <?php echo ucfirst($_SESSION['sewafs_user_role']);  ?> </li>
</ul>

的Javascript

$(document).ready(function () {
    var testRole = $("#activeUser").text();

    //This block of code works
    role = 'Guest';
    if (role == 'Guest') {
        alert("Inside if");
        $("#request_history_li").hide();
        $("#assign_role_li").hide();
        $("#volunteer_li").hide();
        $("#profile_li").show();
        $("#change_password_li").show();

    }

    //This doesn't work why?
    if (testRole == 'Guest') {
        alert("Inside if");
        $("#request_history_li").hide();
        $("#assign_role_li").hide();
        $("#volunteer_li").hide();
        $("#profile_li").show();
        $("#change_password_li").show();

    }

});

但如果我使用alert看到var testRole的值，则会打印Guest。

我尝试使用testRole.toString（）/ string（testRole）方法将testRole值转换为字符串，但没有任何帮助。

请告诉我，我哪里出错了。感谢。

Answer 1

问题似乎是从$("#activeUser").text()

收到的值中的额外空格

<强>解决方案：您必须修剪该值，然后将其用于比较：

var testRole = $("#activeUser").text().trim();

OR

var testRole = $.trim($("#activeUser").text());

OR

var testRole = $("#activeUser").text();
testRole = $.trim(testRole);

以上任何一项都有效。

有关this link的jQuery修剪的更多信息。

空白测试：
如果您想测试是否有额外的空格，请尝试以下javascript代码：

alert("-" + $("#activeUser").text() + "-");

如果你得到“”那么你的收入价值就没有空格了。但是如果你在<之后或>之前得到空格，那么这些就是空格，这会破坏你的派对。

Answer 2

尝试使用$.trim($("#activeUser").text());修剪字符串你的元素中似乎有空格。

Answer 3

您需要在字符串的开头和结尾修剪空格：

var testRole = $("#activeUser").text().replace(/^\s+|\s+$/g,'');

您可以在此处查看原因：http://jsfiddle.net/AfUZR/1/

Answer 4

Demo

$(document).ready(function () {
        var testRole = $("#activeUser").text().trim();    
        //This doesn't work why?
        if (testRole == "Guest") {
            alert("Inside if");
            $("#request_history_li").hide();
            $("#assign_role_li").hide();
            $("#volunteer_li").hide();
            $("#profile_li").show();
            $("#change_password_li").show();

        }

    });

Answer 5

男人，首先你必须做什么，它是写正确的选择器。

$("#request_history_li").hide();
$("#assign_role_li").hide();

你可以写

$("#request_history_li, #assign_role_li").hide();

或者您可以添加这些元素的相同类别，这是正确的

<ul>
    <li class="same_class 1"></li>
    <li class="same_class 2"></li>
</ul>

和

$(".same_class").hide();

好吗？下：

关于你的问题，js比你确定角色更早加载，使用

$(document).ready(function(){
  ......
});

jquery text（）不与string比较

5 个答案: