2

我正在尝试创建一个 jQuery 函数,该函数会自动将特定图像的大小调整为其父级的宽度。如果相关,则适用于 vbulletin 4.2.0

这是相关的(简化的)代码:

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
        var newWidth = $('.floatcontainer.doc_header').css("width");
        $('.logo-image').css("width", newWidth);

        });
    </script>
</head>

<div class="floatcontainer.doc_header" style="width: 90%; height: 200px;">
    <img class=".logo-image" src="/img/headerimg.jpg"/> //the image is naturally 1092x200
</div>

解决了!我终于想出了在哪里编辑这张图片的css,所以我不需要用jQuery来做。不完全是我正在寻找的解决方案,但是嘿 - 谁在抱怨!

谢谢你的帮助!

4

2 回答 2

3

缺少正确的类选择器

 $('.floatcontainer doc_header')
                    ^--- Missing the class selector 

应该是

 $('.floatcontainer.doc_header')  // Make sure there is no space
                   ^----

检查小提琴

更新

我知道问题是什么

<img class=".logo-image"

一个带点的类..

所以正确的选择器是

$('.\\.logo-image')

并不是

$('.logo-image')

这就是它没有找到特定图像的原因

更新的小提琴

如果您希望它与您指定的选择器一起使用,则将 HTML 中的类更改为

<img class="logo-image" ^--- 这里没有点.. 所以选择器是 $('.logo-image')

<img class=".logo-image" ^--- 点存在.. 所以选择器是 $('.\\.logo-image')

于 2012-12-14T21:42:00.123 回答
0

尝试这个:

$('.logo-image').width($('.floatcontainer.doc_header').width());

此外,您不应该在元素类中使用点!

也可以改为更改 css:

 .logo-image { width: 100%; }
于 2012-12-14T21:44:20.297 回答