獲取相同的每個類的文本並將其設置爲變量

目前我已經手動設置每個變量，但我希望它自動執行此操作。獲取相同的每個類的文本並將其設置爲變量

這是我當前的代碼：

var homePos = $('#btn_home').offset(); 
    var homeWidth = $('#btn_home').outerWidth(); 
    var homeArrow = homePos.left + (homeWidth/2) - bodyWidth/2; 

    var serverPos = $('#btn_server').offset(); 
    var serverWidth = $('#btn_server').outerWidth(); 
    var serverArrow = serverPos.left + (serverWidth/2) - bodyWidth/2; 

    var infoPos = $('#btn_info').offset(); 
    var infoWidth = $('#btn_info').outerWidth(); 
    var infoArrow = infoPos.left + (infoWidth/2) - bodyWidth/2;

請注意，我basicly重複同樣的事情用不同的名稱和ID。

我有多個類別設置了不同的文本，如這些：

<div class="btn a" id="btn_Home">Home</div> 
    <div class="btn" id="btn_Info">Info</div>

所以我雖然我可以用文本，並從中創建變量，但我不知道怎麼樣。我想我可以做這樣的東西，但我不知道如何從這裏繼續：

$('.btn').each(function() { 
    var btnText = $(this).text(); 
    });

來源

2013-06-19 user2501582

你正在創建大量的變量，但你實際上在做什麼？ –

，如果你只是想箭：

var bodyWidth = $('body').width(); 
var arrows={}; 
$('.btn').each(function() { 
    var btnText = $(this).text(); 
    var pos = $(this).offset(); 
    var width = $(this).outerWidth(); 
    arrows[btnText]=pos.left + (width/2) - bodyWidth/2; 
});

如果你想別人瓦爾太：

var bodyWidth = $('body').width(); 
var vars={}; 
$('.btn').each(function() { 
    var btnText = $(this).text(); 
    vars[btnText]={}; 
    vars[btnText]['pos'] = $(this).offset(); 
    vars[btnText]['width'] = $(this).outerWidth(); 
    vars[btnText]['arrow']=vars[btnText]['pos'].left + (vars[btnText]['width']/2) - bodyWidth/2; 
});

來源

2013-06-19 15:15:58 Pierre

謝謝，得到這個工作:) – user2501582

存儲數據到一個對象：

var data = {} 

// catch all elements whose ID starts with btn_ 
$('[id^="btn_"]').each(function(){ 

    data[this.id.split('btn_').pop()] = { 
    'pos' : $(this).offset(), 
    'width' : $(this).outerWidth(), 
    ... : ... 
    } 

});

這種方式，你可以參考data['Home']或data['Info']。

來源

2013-06-19 14:40:38 moonwave99

你想要一個對象，而不是一個數組。 'var data = {};'。另外，爲什麼你從'$（'。btn'）'改變選擇器？ –

@RocketHazmat因爲你可能想擁有不屬於這個集合的'.btn'東西 - 我只需要依賴一個'data- *'attr，但那就是OP問題。 – moonwave99

然後爲此添加一個類，如果你有'btn_'不屬於的東西？ –

你可以寫一個函數來爲你創建一個值的存儲。我不知道這會節省你很多的代碼，如果你只有做到這一點三倍，但：

var values = {}; 
var bodyWidth = $('body').width(); 

function addValues(key) { 
    var $el = $('#btn_' + key); 
    var offset = $el.offset(); 
    var outerWidth = $el.outerWidth(); 

    values[key + 'Pos'] = offset; 
    values[key + 'Width'] = outerWidth; 
    values[key + 'Arrow'] = offset.left + (outerWidth/2) - bodyWidth/2; 
} 

addValues('home'); 
addValues('server'); 
addValues('info');

http://jsfiddle.net/yXYq6/2

來源

2013-06-19 14:44:18 cfs

你可以試試這個。然後，所有的數據是1個變量：

var data = {}; 
$(function(){ 
    var id, pos, width; 
    function process(selector) { 
    $(selector).each(function() { 
     data[id = $(this).attr('id')] = { 
     pos: pos = $(this).offset(), 
     width: width = $(this).outerWidth(), 
     arrow: pos.left + (width/2) - width/2, 
     }; 
    }); 
    } 
    process('.btn'); 
    console.log(data); 
});

來源

2013-06-19 14:54:24 Precastic

獲取相同的每個類的文本並將其設置爲變量

回答

相關問題