chrome上的jquery width（）函数给我加载和重载的不同值（F5） [英] Jquery width() function on chrome gives me different values on loading and reload(F5)

问题描述

我不知道发生了什么，但我有这样的菜单设置。

 < div class =indice_item activo > 
< div class =indice_item> 
< div class =indice_item> 
< div class =indice_item> 
< div class =indice_item> 
< div id =punterostyle =width：180px; height：19px; top：70px; left：0px; background-color：rgb（10，173，247）;>& nbsp ;< / DIV> 
  

事情是，div.puntero是一个div，它跟随着鼠标，当它悬停在不同的indice_item。我这样做与jQuery和它的功能动画。
当页面加载时创建这个div.puntero，它会查找这个菜单的第一个项目并获取宽度以及顶部和左侧坐标，因此它可以在具有该类的项目下设置div.puntero

这是执行此操作的代码

  / * 
 * Seleccionado el primero activo 
 * / 
 $（document）.ready（function（）{
 $（'div.indice_item'）。last（）。after（' < div id =puntero>& nbsp;< / div>'）; 
 // seteamos el puntero donde debe estar 
 ancho = $（'div.indice_item'） （）.width（）
 alert（ancho）; 
 $（'＃puntero'）。width（$（'div.indice_item'）。first（）。width（））; 
 $（'＃puntero'）。height（（$（'div.indice_item'）。first（）。height（）+ 3））; 
 $（'＃puntero'）。css（{
top：$（'div.indice_item'）。position（）。top，
left：$（'div.indice_item'）。position（）。left 
}）; 
 $（'。indice_item'）。each（function（）{
 // $（this）。
}）; 
}）; 
  

这在firefox中完美运行，但在chrome中我遇到了一些问题，它似乎正常工作。但后来我按重新加载或F5和div.puntero的宽度变得疯狂。
我添加了警报（ancho）;宽度和当我去的页面，它给了我正确的宽度180，当我按下重新加载1665或1649，图表。
为什么它是这样工作的？

解决方案

尝试在加载所有内容后设置高度和宽度，使用 $（window）.load（function（）{//设置高度和宽度}）; 。 $ b

我相信它似乎在Firefox中正常工作，因为缓存。也许我错了，只是设置jsFiddle。指出问题会更容易。

I dont what is going on but I have this menu set like this

<div class="indice_item activo">
<div class="indice_item">
<div class="indice_item">
<div class="indice_item">
<div class="indice_item">
<div id="puntero" style="width: 180px; height: 19px; top: 70px; left: 0px; background-color: rgb(10, 173, 247);">&nbsp;</div>

The thing is that the div.puntero is a div that follows the mouse when it hovers over the different indice_item. I do this with jquery and its functions animate. When the page loads it creates this div.puntero, it looks for the first item of this menu and gets the width and the top and left coordinates, so it can set the div.puntero under the item that has the class activo.

This is the code that does that

/*
 * Seleccionado el primero activo 
 */
$(document).ready(function() {
    $('div.indice_item').last().after('<div id="puntero">&nbsp;</div>');
    //seteamos el puntero donde debe estar
    ancho=$('div.indice_item').first().width()
    alert(ancho);
    $('#puntero').width($('div.indice_item').first().width());
    $('#puntero').height(($('div.indice_item').first().height()+3));
    $('#puntero').css({
        "top"  : $('div.indice_item').position().top,
        "left" : $('div.indice_item').position().left
    });
    $('.indice_item').each(function (){
        //$(this).
    });
});

This works perfectly in firefox, but in chrome I have several problems, it seemed to work correct. But then I pressed reload or F5 and the width of the div.puntero goes crazy. I added the alert(ancho); for the width and when I go to the page it gives me the correct width 180, and when I press reload 1665 or 1649, of the charts. Why it is working like that?

解决方案

Try to set the height and width after everything is loaded, i.e, use $(window).load(function() {//set height and width here});.

I believe it appears to work fine in firefox because of caching. Maybe I'm wrong, just set-up jsFiddle. It'll be lot easier to pin-point the issue.

这篇关于chrome上的jquery width（）函数给我加载和重载的不同值（F5）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！