0

如何更改它（http://jsfiddle.net/jRAAg/2/），以便根据我从下拉列表中选择的组合，它会在上面显示不同的值。例如，如果我只选择“男性”和“18-24”，它应该只显示与该选择相对应的分数。提前致谢！

代码：

<div id="segmentscore" data-gender="1" data-age="0">100</div>
<div id="segmentaware" data-gender="1" data-age="0">150</div>

<div id="segmentscore" data-gender="1" data-age="2">190</div>
<div id="segmentaware" data-gender="1" data-age="2">100</div>


<div id="select1">
    <select id="genderlist">
      <option value="0"></option>
      <option value="1">Male</option>
      <option value="2">Female</option>
  </select></div>
  <div id="select2"><select id="agelist">
    <option value="0"></option>
      <option value="1">12-17</option>
      <option value="2">18-24</option>
      <option value="3">25-34</option>
      <option value="4">35-44</option>
      <option value="5">45-54</option>
      <option value="6">55-99+</option>
  </select></div>

jQuery

$('#genderlist').on('change', function() {
  $('[data-gender]').each( function(index, element) {
    element.style.display = 'none'
  })
  gender = $('#genderlist')[0].value 
  $('[data-gender='+gender+']').each( function(index, element) {
    element.style.display = 'block'
  })
})
$('#agelist').on('change', function() {
  $('[data-age]').each( function(index, element) {
    element.style.display = 'none'
  })
  age = $('#agelist')[0].value
  $('[data-age='+age+']').each( function(index, element) {
    element.style.display = 'block'
  })
})
4

1 回答 1

0

好的，所以我试图更好地理解你的问题。您有 2 个下拉列表，当它们更新为您想要的相同分数时，值会显示。我在这里为此创建了一个小提琴：http: //jsfiddle.net/Vsd3G/5/

HTML 基本上没有改变 - 删除了重复的 id 等：

<div id="segmentscore"></div>
<div id="segmentaware"></div>
<div id="select1">
    <select id="genderlist">
    ...
    </select>
</div>
<div id="select2">
    <select id="agelist">
    ...
    </select>
</div>

我创建了一个“分数”数组，其中指定了您的性别\年龄选择索引+分数并在那里“意识到”。

var scores = [{
    gender: 1,
    ages: 1,
    score: 100,
    aware: 150
}, {
    gender: 1,
    ages: 2,
    score: 190,
    aware: 150
}];

然后，我为此应用程序的范围声明以下变量。

var genderValue, age;

然后事件处理程序确定是否已选择\设置正确的内容以及如果它们是做什么的。

$('#genderlist').on('change', function () {
    genderValue = $('#genderlist option:selected').val();
    if (age !== undefined)     {
        updateScore();
    }
});

$('#agelist').on('change', function () {
    age = $('#agelist option:selected').val();
    if (genderValue !== undefined)     {
        updateScore();
    }
});

最后是更新分数函数，它将计算是否使用下划线 JS ( http://underscorejs.org/ )为该年龄\性别找到结果分数。特别是 _.where 函数。

Parseint 是必需的，因为它.val()返回一个字符串。

function updateScore() {
    var result = _.where(scores, {gender: parseInt(genderValue), ages: parseInt(age)})[0]; //assume 1 result always
    $('#segmentscore').text(result.score);
    $('#segmentaware').text(result.aware);
};

这样，您需要做的就是扩展上面的 score 数组，而不是创建越来越多的 DOM 元素来显示\隐藏信息，只需将其替换为您所拥有的即可。这也完全不使用 foreachs。

希望这会有所帮助，并随时提出任何问题。

于 2013-06-10T21:27:50.397 回答