6

我正在使用 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 值转换为字符串，但没有任何帮助。

请让我知道，我哪里出错了。谢谢。

4

5 回答 5

12

问题似乎是您收到的值中有额外的空格$("#activeUser").text()

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

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

或者

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

或者

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

以上任何一项都可以。

在此链接上有关 jQuery 修剪的更多信息。

空格测试：
如果你想测试你是否得到额外的空格，那么试试下面的 javascript 代码：

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

如果你得到“”，那么你收到的值中没有空格。但是，如果您在 之后<或之前>有空格，那么这些是空格，会破坏您的聚会。

于 2013-08-23T06:49:35.490 回答
3

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

于 2013-08-23T06:26:42.113 回答
0

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

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

你可以在这里看到为什么：http: //jsfiddle.net/AfUZR/1/

于 2013-08-23T06:31:55.837 回答
0

演示

$(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();

        }

    });
于 2013-08-23T06:42:05.507 回答
-1

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

$("#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(){
  ......
});
于 2013-08-23T08:08:29.193 回答