使用jQuery在页面上向图像等添加类属性？

Question

李帮助？由于我的jQuery.noob状态而提前道歉,但我正在绘制一个空白,并且关于为什么这不起作用的想法.也许这里有人可以看到我不是的东西？我当然感谢任何帮助.

问题

这个网页上有几个图像(也是段落等),我想添加一个类.他们目前没有上课.

为什么我要添加一个类

我想使用CSS3来定位该类并设置任何具有它的样式.更具体地说,这将是一个弹出菜单,我想调整它的不透明度并为其进入和退出设置动画.

我是怎么做的

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $("document").ready(function() {
        $("img").addClass("menumain");
                   alert("Here I am!"); //This alert will go when I figure this out, I just added it to see if it pops up (it does).
    });
</script>

我也试过这种方式(注意:我的所有图像都包含文件名中的字符串"menumain-")

<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $("document").ready(function() {
        $("img[src*=menumain-]").attr({class:"menumain"});

    });
</script>

那么当我尝试时会发生什么？

没有.我加载页面,(警报弹出,我解雇)然后使用firebug和/或Safari开发人员工具等扩展身体,并深入查看页面上的图像.我看到了图像属性,但是我没有看到添加类的位置,更不用说"menumain"了,这就是我想要的类.

部分原因这让我疯狂

我在同一页面上有另一个jQuery脚本,它做了类似的事情.它将属性,而不是Class属性,但其他属性添加到围绕整个页面的主Div.我对jQuery函数没有任何问题,所以我不明白为什么这个不起作用.

为什么它可能不起作用

我从周日开始检查9种方法的语法,但我没有看到任何错误.不过,你知道如何证明阅读语法.

其次,我正在瞄准的图像(我也将尝试将菜单中的文本和按钮标记在同一个类中)被埋在Div中,如下所示:

<div id="image194" style="visibility: inherit;">
     <a name="image194anc">
          <img width="317" height="564" border="0" alt="menumain-bg-317x564"    src="images/menumain-bg-317x564.png" name="image194Img">
     </a>
</div>

我假设我的目标$("img [src = menumain - ]")*会找到这些图像,无论它们是否在Div中,但也许我错了？

还有一件事

这个"网页"由Trivantis称为Lectora的应用程序生成.这是一个WYSIWYG创作工具,适用于创建在线培训的教学设计者(不是Web开发人员).因此,我不是在DreamWeaver中创建整个内容,也不是可以改变整个Web设计方法.但我应该能够在一组页面元素上弹出一个类并用CSS来定位它们,不是吗？

如果你看错了,请告诉我.这是页面的一个版本 - > http://bit.ly/Rijnl8

Answer 1

jQuery 具有用于添加类的内置方法。

<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("img[src*=menumain-]").addClass("menumain");

    });
</script>

http://api.jquery.com/addClass

Answer 2

只需在我构建的应用程序中执行此操作即可。你做的是正确的事，但你做得还不够。使用 .attr 函数时添加一个值：

$('.category').attr('theAttributeHere','theAttributeValueHere');