jquery id选择器更改类

Question

$('#sidebar ul li ul li').click(function () {
        var ids = $(this).attr('id');
        $('#ids').addClass('active');
        $('#ids').parent('ul').parent('li').addClass('has-sub active');
        alert(ids); // Will alert the id if the element has one    
    });

我不明白为什么这不起作用。 alert给了我li元素的ID，但在它不工作之前的两行我的意思是这两个：

$('#ids').addClass('active');
$('#ids').parent('ul').parent('li').addClass('has-sub active');

问题出在哪里？我错过了什么吗？

Answer 1

您需要将变量连接起来：

$('#' + ids).

$('#ids')正在寻找ID为ids的元素。正如Blender在评论中指出的那样，你为什么这样做呢？您点击的元素可以简称为$(this)或this。对我来说，这可能更有意义：

$('#sidebar ul li ul li').click(function () {
    $(this).addClass('active').parent('ul').parent('li').addClass('has-sub active');
});

您也可以将.parent('ul').parent('li')替换为.closest('li')，但我需要确定HTML结构。

Answer 2

您正在使用当前元素的id将选择器连接在一起。相反，您可以在处理程序中使用this关键字，并将其用作对单击元素的引用。试试这个：

$('#sidebar ul li ul li').click(function () {
    $(this).addClass('active').closest('li').addClass('has-sub active');  
});

Answer 3

ids是一个变量，它包含clicked元素的id。并在您的代码中：

$('#ids').addClass('active');
$('#ids').parent('ul').parent('li').addClass('has-sub active');

您使用ids作为字符串。这不是正确的方法。您应该将$('#ids')替换为$('#' + ids)。

试试这个：

$('#' + ids).addClass('active');
$('#' + ids).parent('ul').parent('li').addClass('has-sub active');

Answer 4

您是否要将新类应用于变量ID中的ID？如果是这样，您当前正在将这些应用于ID为'ids'的元素。您应该使用以下选择器：$('#'+ids).

Answer 5

@IshanJain @RoryMcCrossan @ j08691 @EliantenHolder感谢您的回复。 Jquery没有帮助解决这个问题，但这个助手有效。

public static class HtmlHelperExtensions
{

    public static string ActivePage(this HtmlHelper htmlHelper,string controller, string action)
    {
        string _classValue="";

        string _currentController = htmlHelper.ViewContext.Controller.ValueProvider.GetValue("controller").RawValue.ToString();

        string _currentAction = htmlHelper.ViewContext.Controller.ValueProvider.GetValue("action").RawValue.ToString();

        if (_currentController == controller && _currentAction == action)
        {
            _classValue = "active";
        }
        else if (_currentController == controller && action.Equals(""))
        {
            _classValue = "has-sub active";
        }
        else
        {
            if (action.Equals(""))
            {
                _classValue = "has-sub";
            }
        }

        return _classValue;
    }
}

这是我的布局页面

<li class="@Html.ActivePage("Order","")">
              <a href="javascript:;" class="">
                  <span class="icon-box"> <i class="icon-dashboard"></i></span> Sipariş Açma

                  <span class="arrow"></span>
              </a>
              <ul class="sub">
                  <li class="@Html.ActivePage("Order","Index")"><a class="" href="@Url.Action("Index","Order")">Sipariş</a></li>
                  <li class="@Html.ActivePage("Order","orderProduct")"><a class="" href="@Url.Action("orderProduct","Order")">Ürün Sipariş</a></li>
                  <li class="@Html.ActivePage("Order","orderCloth")"><a class="" href="@Url.Action("orderCloth","Order")">Kumaş Sipariş</a></li>
                  <li class="@Html.ActivePage("Order","orderAccessory")"><a class="" href="@Url.Action("orderAccessory","Order")">Aksesuar Sipariş</a></li>
              </ul>
          </li>