-2

我正在尝试使用 select 为用户提供两件事的选项。1个选项是所有者，另一个选项是非所有者。如果他们是所有者，我希望能够问他们不同的问题。我希望他们能够输入数字 1-10 的答案，并根据答案给他们反馈。如果可以的话，我会尽量把它说清楚。一题二选。when that is selected the owner or non owner questions will be asked and added i have include a fiddle with what i have. 我到处都是，不知道不要介意我。如果有人能告诉我那些作品，那就太好了！！！更改其中的任何内容，只希望它工作。 http://jsfiddle.net/philyphil/CcVsz/11/

<select class="myOptions">
<option data-val="" selected>Pick an option</option>
<option data-val="owner">Owner</option>
<option data-val="not-owner">Not Owner</option>
</select>
4

2 回答 2

0

我建议，为了处理求和，将 jQuery 更改为：

$('#butt').click(function () {

    /* this gets an array of the numbers contained within visible
       input elements */
    var nums = $('.list input:visible').map(function () {
        return parseInt(this.value, 10);
    }),
    // initialises the total variable:
        total = 0;
    /* iterates over the numbers contained within the array,
       adding them to the 'total' */
    for (var i = 0, len = nums.length; i < len; i++) {
        total += nums[i];
    }

    var msg = '';

    if (isNaN(total)) {
        msg = 'Input three numbers, please...';
    } else if (total < 30) {
        msg = "That's bad, should be higher...";
    } else if (total > 40) {
        msg = "That's bad, should be lower...";
    } else {
        msg = "You got it... Nice work.";
    }


    $('#output').text(msg);

});

而且也不使用id属性来选择要求和的元素，而是使用class-names：

<div class="list owner">
    <p>a</p>
    <input class="numbers" type="text" size="2" />
    <br/>
    <p>b</p>
    <input class="numbers" type="text" size="2" />
    <br/>
    <p>c</p>
    <input class="numbers" type="text" size="2" />
    <br/>
    <!-- questions for owners -->
</div>
<div class="list not-owner">
    <p>x</p>
    <input class="numbers" type="text" size="2" />
    <br/>
    <p>y</p>
    <input class="numbers" type="text" size="2" />
    <br/>
    <p>z</p>
    <input class="numbers" type="text" size="2" />
    <br/>
    <!-- questions for non-owners -->
</div>

JS 小提琴演示。

测试某人是否是或说他们是所有者：

var total = 0,
    isOwner = $.trim($('.myOptions option:selected').val()) === 'owner';
if (isOwner) {
    console.log("It's the owner");
}

上面的 jQuery 耦合到一个select元素，其中option元素具有值：

<select class="myOptions">
    <option value="-1" data-val="" selected>Pick an option</option>
    <option value="owner" data-val="owner">Owner</option>
    <option value="not-owner" data-val="not-owner">Not Owner</option>
</select>

JS 小提琴演示。

参考：

于 2013-06-29T08:33:55.490 回答
0

您的选择器在“非所有者”的点击处理程序中错误，顺便说一句，ID 在上下文页面上必须是唯一的。最好的方法是使用类而不是 ID 并检查可见框：

$('.myOptions').change(function(){
  $('.list').removeClass('active')
  .filter('.' + $('.myOptions').children('option:selected').attr('data-val'))
  .addClass('active');
});

/* want to say if owner do this 
when I un-comment this it breaks
var qbc = $('#owner')
var c = $('#myOptions')

if $(c == qbc){
    prompt("worked!!!!")
}
*/


$('#butt').click(function () {
    var $boxOne = $('.box:visible').eq(0);
var k1 = parseInt($boxOne.val(), 10);
var $boxTwo = $('.box:visible').eq(1);
    var k2 = parseInt($boxTwo.val(), 10);

    var $boxThree = $('.box:visible').eq(2);
    var k3 = parseInt($boxThree.val(), 10);


    var total = k1 + k2 + k3;

    var msg = '';

    if (isNaN(total)) {
        msg = 'Input three numbers, please...';
    } else if (total < 30) {
        msg = "That's bad, should be higher...";
    } else if (total > 40) {
        msg = "That's bad, should be lower...";
    } else {
        msg = "You got it... Nice work.";
    }


    $('#output').text(msg);   

});

/* else i will change question number and do same thing */

演示

于 2013-06-29T08:27:42.697 回答