Calling a method inside an object doesn't work

时间:2018-03-25 19:17:28

标签: jquery

The close function should show an X letter as span when you click the Contact Us button, but it doesn't show up. Can you help me? This is the codepen: https://codepen.io/anon/pen/QmqNKG

Thank you...

HTML:

<div id="contact">
        <form>
            <p><input type="text" name="name" placeholder="Email"></p>
            <p><textarea name="name" placeholder="Message"></textarea></p>
            <p><input type="submit" value="Send"></p>
        </form>
</div>

CSS:

#contact{width:550px;margin:40px auto;}
.js #contact{display:none;position:absolute;top:81px;background:#ccc;width:550px;}
.js #contact form {text-align:center;}

JS:

(function(){
            $('html').addClass('js');
            var container = $('#contact');
            var contactForm = {
                init: function() {
                    $('<button></button>', {
                        text: 'Contact Us'
                    })
                    .insertAfter(container)
                    .on('click', this.show)
                },
                show: function() {
                    contactForm.close;
                    container.show();
                },
                hide: function() {
                    container.hide();
                },
                close: function() {
                    $('<span><span>', {
                        text: 'X',
                        class: 'close'
                    })
                    .prependTo(container)
                    .on('click', contactForm.hide)
                }
            };
            contactForm.init();
        }());

1 个答案:

答案 0 :(得分:0)

You need to close span tag properly in close function and call contactForm.close() function in show function. Take a look:

show: function() {
    contactForm.close();
    container.show();
},
hide: function() {
    container.hide();
    // remove x span
    $('.close').remove();
},
close: function() {
    $('<span></span>', {
        text: 'x',
        class: 'close'
    })
    .prependTo(container)
    .on('click', contactForm.hide)
}

Hope it helps!