0

我已经尝试过，但似乎无法弄清楚如何调试它。在用户单击“立即兑换此优惠！”之前，该 div 应该是不可见的。按钮。“面板” div 应该出现在内容之上。如果用户没有在文本字段中输入任何内容，它应该变成红色。

<div id="centreblock">
            <h1>WOW! AMAZING!!!</h1>
            <img src="images/ipad.gif" width="100%" height="250">
            <h2>Congratulations! You won a free iPad! Enter your name, address, and phone number        to have it delivered now.</h2>
    <form action="">
    <label for="firstName">First Name: </label>
    <input type="text" size="12" id="firstName" name="firstName" maxlength="30">
    <br>
    <p id="output"></p>
    <input type="button" id="popup" value="REDEEM THIS OFFER NOW!">
    <br>
    </form>
    </div>
    <div id="panel">
        <h1 id="output-inside"></h1>
    </div>
    <script src="http//code.jquery.com/jquery-latest.min.js"></script>
    <script src="js/script.js"></script>

Javascript

//script.js
var firstName;

function newPanel() {
    $('#panel').show();
    $('#output-inside').text('Congrats ' + firstName + ', your iPad will be delivered to you in the next century') 
}

function panelCheck() {
    firstName = $('#firstName').val();
    if (firstName != '') {
        $('#firstName').removeClass('error');
        $('#output').text('');
        newPanel();
    } else {
        $('#firstName').addClass('error').focus();
        $('#output').text('We need your name');
    }
}
$(function() {
    $('#panel').hide();
    $('#popup').click(function() {
        panelCheck();
    });
    $('#firstName').keypress(function(e) {
        if (e.keyCode === 13) {
            panelCheck();
        }
    });
    $('#close-panel').click(function() {
        $('#panel').hide();
    });
});
4

3 回答 3

1

你为什么不试试这样的东西？

<div id="centreblock">      
<form action="" id="panel2">
    <h1>WOW! AMAZING!!!</h1>
    <h2>Congratulations! You won a free iPad! Enter your name, address, and phone number to have it delivered now.</h2>
    <label for="firstName">First Name: </label>
    <input type="text" size="12" id="firstName" name="firstName" maxlength="30" />
    <br />
    <p id="output"></p>
    <input type="button" id="popup" value="REDEEM THIS OFFER NOW!" />
    <br />
</form>
<div id="panel">
    <h1 id="output-inside"></h1>
</div>


function newPanel() {
$('#panel').show();
$('#output-inside').text('Congrats ' + firstName + ', your iPad will be delivered to you in the next century');
$('#panel2').hide();}

这是一个工作演示http://jsfiddle.net/FJrKq/3/

我已经编辑了一些元素的顺序，并在面板显示后隐藏了其中一些元素。（我还删除了一些文本，以便更容易查看和快速编辑页面）

于 2013-03-10T08:47:42.063 回答
0

将您的 JavaScript 代码写入：

$('document').ready(function(){
   // your code
});

在此范围之外编写您的函数。

添加

position:absolute

到样式块中的“#panel”。

于 2013-03-10T08:19:25.070 回答
0

您应该在 jQuery 行的开头使用

$('document').ready(function(){
   // your code here

var firstName;

function newPanel() {
    $('#panel').show();
    $('#output-inside').text('Congrats ' + firstName + ', your iPad will be delivered to you in the next century') 
}

function panelCheck() {
    firstName = $('#firstName').val();
    if (firstName != '') {
        $('#firstName').removeClass('error');
        $('#output').text('');
        newPanel();
    } else {
        $('#firstName').addClass('error').focus();
        $('#output').text('We need your name');
    }
}
$(function() {
    $('#panel').hide();
    $('#popup').click(function() {
        panelCheck();
    });
    $('#firstName').keypress(function(e) {
        if (e.keyCode === 13) {
            panelCheck();
        }
    });
    $('#close-panel').click(function() {
        $('#panel').hide();
    });
});

});
于 2013-12-06T14:54:29.073 回答