Question

我正在尝试下载2个问题。说问题A和问题B.任何一个选项，他们将得到3个问题，他们将用数字1-10回答。现在如果他们选择A它就完美了。但如果他们选择B，第二个选项就不起作用。我一直在寻找一种方法来做这些，我很惊讶我找不到一个简单的方法。我不明白为什么这不起作用，因为无论如何他们输入的内容都会转到box1，box2或box3。这是我的小提琴

$（”。myOptions'）。改变（函数（）{

$('.list').removeClass('active')
.filter('.' + $('.myOptions').children('option:selected').attr('value'))
.addClass('active');

}）;

$（'＃butt'）。click（function（）{

Answer 1

问题是选项的值与分配给.list元素的类不同

解决方案是将选项的值更改为owner和not-owner

<option value="owner">Owner</option>
<option value="not-owner">Not Owner</option>

演示：Fiddle

如果您不想更改选项的值，则可以引入新属性来解决问题

<option data-type="owner" value="under 45 years old">Owner</option>
<option data-type="not-owner" value="over 45 years old">Not Owner</option>

然后

$('.list').removeClass('active').filter('.' + $('.myOptions').children('option:selected').data('type'))
.addClass('active');

演示：Fiddle

<强>更新
另一个问题是分配给输入元素的重复id，这里我建议的解决方案是使用class而不是id，然后从active list元素中获取输入值。

<div class="list owner">
    <p>a</p>
    <input class="box1" type="text" size="2"/><br/>
    <p>b</p>
    <input class="box2" type="text" size="2"/><br/>
    <p>c</p>
    <input class="box3" type="text" size="2"/><br/>
    <!-- questions for owners -->
</div>

<div class="list not-owner">
    <p>x</p>
    <input class="box1" type="text" size="2"/><br/>    
    <p>y</p>
    <input class="box2" type="text" size="2"/><br/>
    <p>z</p>
    <input class="box3" type="text" size="2"/><br/>
    <!-- questions for non-owners -->
</div>

然后

var active = $('.list.active');

var $boxOne = active.find('.box1');
var k1 = parseInt($boxOne.val(), 10);
var $boxTwo = active.find('.box2');
var k2 = parseInt($boxTwo.val(), 10);

var $boxThree = active.find('.box3');
var k3 = parseInt($boxThree.val(), 10);
var total = k1 + k2 + k3;

演示：Fiddle

Answer 2

这可能是因为您选择了option值，而您实际上是在寻找文字：

$('.myOptions').change(function(){
    var optionText = $(this).find('option:selected').text();
    $('.list').removeClass('active').filter('.' + optionText).addClass('active');
});

当您的文字显示not-owner时，它还会搜索一类Not Owner，这是两个截然不同的事情。

下拉2选项，然后问题？

2 个答案: