【问题标题】:Assign a CSS class to a single existing div class rather than to all of them将 CSS 类分配给单个现有的 div 类,而不是所有这些类
【发布时间】:2012-09-13 09:03:41
【问题描述】:

我不确定我这样做是否正确,但我会尽力解释我正在尝试做的事情。

我有一个包含菜单的 HTML 页面。在该菜单中有许多使用特定 CSS 类的实例。当页面发生变化时,会通过 URL 传递一个值,然后用于突出显示所选项目并展开子菜单。

我遇到的问题是,当我尝试使用此值在正确的点展开列表时,我实际上无法选择并添加新的 CSS 类或执行其他操作。我将在下面发布一些代码,以便您可以更好地理解我在说什么,然后给出一个示例场景。

if (param != null) {
    $('.menuButton')[paramvalue].addClass('on');
    $('.menuButton')[paramvalue].slideDown('normal');
}

这就是给出问题的 javascript 部分。在上述情况下,参数值可以替换为 0 或 1 等。这部分正在达到我想要更改的特定类。我通过向 HTML 添加一个 id 并使用以下方法检索它来检查这一点:

 alert($('.menuButton')[paramvalue].id);

这返回了正确的 ID 值。

HTML如下:

<div class="menuButton" id="2">Button 1</div>
<div class="subMenu">
    <ul>
    <li><a href="#">Item 1.1</a></li>
    <li><a href="#">Item 1.2</a></li>
    <li><a href="#">Item 1.3</a></li>
 </ul>
</div>
<div class="menuButton" id="3">Button 2</div>
<div class="subMenu">
<ul>
    <li><a href="#">Item 2.1</a></li>
    <li><a href="#">Item 2.2</a></li>
    </ul>
</div>

id 没有 CSS,它们主要是为了测试而添加的。如有必要,我可以发布相关的 CSS,但我认为这不是问题的一部分。

我应该提一下,使用以下作品

$('.menuButton').addClass('on');

所以也许这可以缩小问题的范围。

如果您需要任何其他信息。随便问问。

感谢您的帮助。

【问题讨论】:

    标签: javascript jquery class css-selectors addclass


    【解决方案1】:

    通过使用$(selector)[index],您将一个jQuery对象转换为一个没有addClass方法的DOM元素对象,您可以使用eq()方法代替:

    $('.menuButton').eq(paramvalue).addClass('on');
    $('.menuButton').eq(paramvalue).slideDown('normal');
    

    你也可以链接你的方法:

    $('.menuButton').eq(paramvalue).addClass('on').slideDown('normal');
    

    【讨论】:

    • 可能还值得注意的是,您可以使用链接将两行转换为一行。与问题无关,但仍然很有帮助。
    • 非常感谢。 slideDown 部分还有其他一些问题,但现在已经解决了。在我忘记它并假设我正在做的实际上是这样之前,我实际上已经使用了 .eq() 几次。希望我不会再次忘记:D。如果我这样做,至少我可以参考这个。
    • @undefined,我可以请你看看这里关于不同主题的 jquery 问题:stackoverflow.com/questions/13137404/… 吗?
    【解决方案2】:

    尝试:

    $('.menuButton').eq(paramvalue).addClass('on');
    

    【讨论】:

      【解决方案3】:

      你也可以这样做:

      $('.menuButton:eq('+paramvalue+')').addClass('on');
      

      这将比选择所有元素然后将它们减少到仅选择一个元素来提高性能。

      【讨论】:

        猜你喜欢
        • 2013-10-28
        • 2019-07-14
        • 1970-01-01
        • 2012-01-28
        • 1970-01-01
        • 2021-07-02
        • 1970-01-01
        • 1970-01-01
        • 2020-11-08
        相关资源
        最近更新 更多