【问题标题】:Having some trouble setting up a jQuery .css function设置 jQuery .css 函数时遇到一些问题
【发布时间】:2012-12-14 21:40:43
【问题描述】:

我正在尝试创建一个 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来做。不完全是我正在寻找的解决方案,但是嘿 - 谁在抱怨!

感谢您的帮助!

【问题讨论】:

  • 不要在类名中添加点。点用作 css 选择器,用于选择具有类的元素。即,如果您有一个元素为 class="some_name",那么您可以通过 css 选择器 .some_name 选择该元素

标签: jquery css vbulletin


【解决方案1】:

缺少正确的类选择器

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

应该是

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

Check Fiddle

更新

我知道问题出在哪里了

<img class=".logo-image"

有一个类,里面有一个点..

所以正确的选择器是

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

与否

$('.logo-image')

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

UPDATED FIDDLE

如果您希望它与您指定的选择器一起使用,请在 HTML 中更改您的类 到

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

&lt;img class=".logo-image" ^--- 点出现 .. 所以选择器是$('.\\.logo-image')

【讨论】:

  • 哇!我不敢相信我忽略了这一点。我会编辑它,看看是不是这样!
  • 好吧,这是一个错误,但它仍然不起作用:(
  • $('.floatcontainer.doc_header')
  • 那就试试这个.css("width", newWidth+ 'px');
  • 正如@fredrik 指出的那样,class 对应于相同的元素,因此选择器之间不应有空格
【解决方案2】:

试试这个:

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

你也不应该在你的元素类中使用点!

也可以改为更改 css:

 .logo-image { width: 100%; }

【讨论】:

  • 我也试过了,可惜还是不行。
  • 您是否看到我的编辑并从您的课程中删除了这些点? (class=".logo-image" 应该是 class="logo-image" 等等)
  • 类名不是我的选择,vbulletin4.2的标准我尝试了这两个建议,但仍然没有骰子。
猜你喜欢
  • 2012-07-02
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-11-01
  • 2021-06-19
  • 1970-01-01
相关资源
最近更新 更多