0

目前我已经手动设置了每个变量，尽管我希望它自动执行此操作。

这是我当前的代码：

    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;

请注意，我基本上使用不同的名称和 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();
    });
4

4 回答 4

2

将数据存储到对象中：

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']or data['Info']。

于 2013-06-19T14:40:38.707 回答
0

如果你只想要箭头：

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-19T15:15:58.020 回答
0

您可以编写一个函数将为您创建一个值存储。但是，如果您只需要执行此操作 3 次，我不确定这是否会为您节省大量代码：

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-19T14:44:18.173 回答
0

你可以试试这个。然后您的所有数据都在 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-19T14:54:24.257 回答