Question

我正在使用Jquery，我在悬停事件期间无法动态更新我的CSS值。基本上我希望底部的那条小线可以缩放到长度的比例到div的大小。

以下是有问题的代码：

$('.menu li').hover(function () {
   left = Math.round($(this).offset().left - $('.menu').offset().left);
   //find the current width of the div
   var width_flux = $('.menu #box .head').html($(this).find('img').width());
   //pass value to CSS 
   $('.menu #box .head').css('width', (parseInt(width_flux)) +'px');
   $('#box').stop(false, true).animate({left: left},{duration:500, easing: style}); 

   //if user click on the menu
});

和相应的css

.menu #box .head {
        background: url("http://whoisedward.com/img/bar.png");
        height:3px;
        width:1px;
        color:#eee;

        /* force text display in one line */
        white-space:nowrap;

        /* set the text position manually */
        padding-left:4px;
        padding-top:3px;
    }

Answer 1

行中存在问题

 var width_flux = $('.menu #box .head').html($(this).find('img').width());

width_flux不是jQuery元素。

修改后的代码：假设您希望将$(this).find('img').width()用作width_flux

$('.menu li').hover(function () {
    left = Math.round($(this).offset().left - $('.menu').offset().left);
    //find the current width of the div
    var width_flux = $(this).find('img').width();
    //pass value to CSS 
    $('.menu #box .head').width(width_flux);
    $('#box').stop(false, true).animate({left: left},{duration:500, easing: style});    

    //if user click on the menu
})

Answer 2

该行

var width_flux = $('.menu #box .head').html($(this).find('img').width());

错了。您将宽度添加到元素，但元素（不是宽度）被分配给width_flux。显然，<element>px不是一个合理的CSS值。

尝试：

width_flux = $(this).find('img').width();
$('.menu #box .head').html(width_flux);
$('.menu #box .head').css('width', width_flux + 'px');

Answer 3

您好像是在为HTML设置值而没有得到它

var width_flux = $('.menu #box .head').html($(this).find('img').width());

所以基本上width_flux将是一个元素..

而是尝试

var width_flux = $(this).find('img').width();

   OR 

var width_flux = $('.menu #box .head').html($(this).find('img').width());

   var width_flux = width_flux.html() ;
    // Then your code

确保检查错误情况

Javascript向CSS发送动态值

3 个答案: