使用jQuery來動態加載元素的樣式

我的頁面使用Ajax使用數據庫中的選項填充組合框。每次選項更改時，組合框的寬度也會更改以匹配最長選項的寬度。這是從演示角度來看煩人，所以我想做到以下幾點：使用jQuery來動態加載元素的樣式

首先，我用了jQuery找出有問題的組合框的寬度，在頁面加載的時間：

$(window).load(function(){ 
    var box_width = $('select#imgClass').width();   
});

但後來我卡住了。我試圖使用$('select#imgClass').css('width', box_width);來設置寬度，但只設置組合框的當前迭代的寬度，而不是將來的任何版本。我想過使用.live()，但因爲這需要一個事件處理程序，它也不會工作。

我的最後一招就是用.append()創建頁面的頭一個CSS規則，但我想問在座的各位，如果有這樣做，我不知道一個更好的辦法？

謝謝。

來源

2011-11-06 stefmikhail

只需使用常規的CSS，然後它將應用於所有內容，而不管它何時添加到DOM。 –

@David Thomas - 這就是我想要做的，除了因爲我希望在CSS中使用的值是可變的，它需要在頁面加載後添加。 – stefmikhail

@stefmikhail，我不小心最初使用'$ .onReady'而不是'.ready'。我已經更新了我的回答:) – Ryan

-1

請閱讀Launching Code on Document Ready。

$(window).load(....);

做了一件完全不同的事，你認爲它確實如此。

http://api.jquery.com/load/

來源

2011-11-06 20:41:29 Mike

我很好奇你認爲我認爲它是什麼？你給我的鏈接是簡寫ajax方法。在上面所示的方法中使用時，它用於將事件綁定到窗口加載。這裏是鏈接http://api.jquery.com/load-event/ – stefmikhail

哦，我讀了Ajax，並且認爲那是你想到的功能，我的不好。 – Mike

當DOM準備好你可以得到組件的寬度。然後，你可以用它來更新組合框，不論什麼動態地發生吧：

$.ready(function() { 

     // set up closure scope 
     var fixedWidth = $('select#imgClass').width(); 

     // set up 'change' event handler to update the width using fixed width 
     $('select#imgClass').live('change', function() { 
      $(this).width(fixedWidth); 
     )); 

    });

UPDATE

你提到你正在響應AJAX調用的change事件的組合框，這會導致我原來的解決方案出現問題。但是，您可以將對象放入全局空間，成爲一名好的網絡公民，並擁有「固定」幾何值。那麼你的Ajax調用可以訪問此值，如下圖所示：

$.ready(function() { 

     // set up global object to hold your fixed geometries 
     MyGeometryValues = {}; 
     MyGeometryValues.imgClassSelect = $('select#imgClass').width(); 

    }); 

    $.get('/path/to/my/url', function(data) { // success handler of AJAX call 

     // do all of your other processing first 

     // then, do this last 
     $('select#imgClass').width(MyGeometryValues.imgClassSelect); 

    )};

來源

2011-11-06 20:42:07 Ryan

唉，它似乎並沒有工作。這可能是因爲我也有'change'觸發的ajax調用。 – stefmikhail

@stefmikhail，沒問題。只需將邏輯移入AJAX調用的成功處理程序，然後添加具有固定幾何值的全局對象。我已經更新了我的答案以反映這一點（在'UPDATE'部分中:) :) – Ryan

我知道你的修改答案在哪裏，我認爲如果我需要設置一個屬性或其他的東西，這將是一個很好的解決方案比一個css值。我只是想着用我的答案，對於每次刷新都會執行的javascript和ajax會少一些。你看我要去哪裏？ – stefmikhail

我認爲唯一的辦法就是HTML運行功能將通過所有元素，並設置CSS迭代的每次更改後。 somtething像：

function SetWidth(value) { 
    $('.elements input').each({ 
    $(this).width(value); 
}); 
}

來源

2011-11-06 20:42:52 bravedick

這可能確實有效，但我想知道是否使用'.append（）'將一個css規則添加到'head'的末尾會不會更容易？ – stefmikhail

我認爲更容易的是設置類如：.w100，.w150，.w200和切換類來改變寬度。 – bravedick

問題是我不知道有問題的寬度。我想當數據庫選項改變時，可以用最大寬度值更新一個css類，但是我想提出一個代碼來爲我做這件事;檢查頁面加載時的寬度，然後爲由於ajax刷新而產生的任何未來迭代設置該寬度。我將在下面的答案中發佈我的最終代碼。 – stefmikhail

儘管下面塔拉斯Neporozhniy的答案可能確實工作，我覺得下面將進行到底更簡單，並允許每一個Ajax請求更少的代碼。

以下代碼適用於三個組合框，而爲了簡單起見，原始問題僅提及一個組合框。我使用連接來使代碼更具可讀性。哦，雖然我不確定究竟是什麼原因，但以下只包含在$(window).load()之內的作品。 $(document).ready()沒有工作，我懷疑這是因爲組合框通過ajax加載。

$(window).load(function(){ 
    var family_width = $('select#imgFamily').width(), 
     class_width = $('select#imgClass').width(), 
     gender_width = $('select#imgGender').width(); 
    $('head').append('<style type="text/css">'+ 
         ' select#imgFamily {width: '+ family_width +'px}'+ 
         ' select#imgClass {width: '+ class_width +'px}'+ 
         ' select#imgGender {width: '+ gender_width +'px}'+ 
         '</style>'); 
});

感謝那些試圖幫助的人。

來源

2011-11-06 21:23:23 stefmikhail

使用jQuery來動態加載元素的樣式

回答

相關問題