Question

现在，我有2个链接可以根据用户点击的链接将用户定向到2个不同的内容组。这两个链接是：

<a id="q1_one" class="a1" href="javascript:void(0)">I am between ages 25 and 30</a>
<a id="q1_two" class="a2" href="javascript:void(0)">I am between ages 31-50</a>

及其指向的内容是：

<div class="if_one">
    <p>This content will display if the user entered ages ages 25-30</p>    
    <p>The user is <strong>XX</strong> years old.</p>
</div>
<div class="if_two">
    <p>This content will display if the user entered ages ages 31-50</p>    
    <p>The user is <strong>XX</strong> years old.</p>
</div>

以下是使其有效的JavaScript：

$(document).on('click', '.a1', function (e) {
        e.preventDefault();
        $('.a1, .a2').hide();
        $('.if_one').show();
    });

$(document).on('click', '.a2', function (e) {
        e.preventDefault();
        $('.a1, .a2').hide();
        $('.if_two').show();
    });

我希望能够使用<input />代替2个锚..那样，如果用户输入年龄25,26,27,28,29,30，它将发送到第一组内容，对于第二组内容，它将对31,32,33,34等执行相同的操作。

我也试图在代码中显示他们输入的年龄。这是JSFiddle

Answer 1

如果您只想要input没有按钮，请使用blur

<input type='text' id='age' />

$("#age").blur(function() {
    $('.a1, .a2').hide();
    var age = parseInt(this.value, 10);
    if (age < 30)
        $('.if_one').show();
    else
        $('.if_two').show();
});

要显示XX所在的年龄，请使用样式化的span，而不是strong，并在if块中添加此行：

$('.if_one span').text(age); //obviously change to .if_two for the other span.

Answer 2

这将更改 XX

$("#age").blur(function() {
$('.a1, .a2').hide();
var age = parseInt($('#age').val());
if (age < 30)
{
$('.if_one').show();
$('#a1').text(age);
alert($('#a1').val());
}
else
{
$('.if_two').show();
$('#a2').text(age);
}
});

工作小提琴fiddle

Answer 3

检查

http://jsfiddle.net/8z2PS/2/

<p>How do I turn this Into an Input Box With a Submit button instead of the links below </p>
<input type="button" id="q1_one" class="a1" value="Submit" /><br />


<br/>Enter your age here:

<input id="inp_age" />

<br /><br /><br />

<div class="if_one">
    <p>This content will display if the user entered ages ages 25-30</p>    
    <p>The user is <strong class="getAge">XX</strong> years old.</p>

    <p><strong>How do I replace XX with the age they put in the box?</strong></p>
</div>
<div class="if_two">
    <p>This content will display if the user entered ages ages 31-50</p>    
    <p>The user is <strong class="getAge">XX</strong> years old.</p>

    <p><strong>How do I replace XX with the age they put in the box?</strong></p>
</div>


$(document).on('click', '.a1', function (e) {
        e.preventDefault();
        $('.a1, .a2').hide();

    if(parseInt($('#inp_age').val())>=31)
        $('.if_two').show();
    else
        $('.if_one').show();

    $('.getAge').html($('#inp_age').val());
    });

发送到内容基于年龄（XX）输入输入？

3 个答案: