Question

如何更改此项（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'
  })
})

Answer 1

好的，所以我试图更好地理解你的问题。您有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;

然后事件处理程序确定是否已经选择了正确的东西\ set以及如果它们是怎么做。

$('#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);
};

这样你需要做的就是扩展上面的得分数组而不是创建越来越多的DOM元素来显示\ hide信息，只需用你拥有的东西替换它。这根本不使用foreachs。

希望这有帮助并随意提出任何问题。

根据所选选项更改显示的内容

1 个答案: