Question

我试图让表单弹出。当用户点击“联系我”按钮时，它会显示弹出窗体我正在尝试此代码我知道一些语法错误请帮忙！

我的HTML

 <div class="col-lg-12">
            <article>
                <h1>First Article</h1>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </article>

            <form id="form">
              <div class="form-group">
                <label>Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
              </div>
              <div class="form-group">
                <label>Password</label>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
              </div>

              <button type="submit" class="btn btn-default">Submit</button>
            </form>
        </div>

MY JQUERY

 (function(){

        var object = {

            formToShow:$('#form'),

            showForm: function(){
                $(this).object.formToShow.show();
            }

        };

        $('<button class="btn btn-default">Contact Me</button>').insertAfter('article:first').on('click', object.showForm);

    })();

Answer 1

此处的问题是$(this).object未定义，导致点击处理程序出现脚本错误。

处理程序内的

this引用dom元素，而jQuery对象$(this)没有名为object的属性。

一种可能的解决方案是为回调方法使用自定义上下文，以便在调用时this内的showForm将引用object实例。

$('<button class="btn btn-default">Contact Me</button>').insertAfter('article:first').on('click', object.showForm.bind(object));

另一个解决方案可能是直接访问闭包变量object，如

(function () {

    var object = {

        formToShow: $('#form'),

        showForm: function () {
            object.formToShow.show();
        }

    };

    $('<button class="btn btn-default">Contact Me</button>').insertAfter('article:first').on('click', object.showForm);

})();

Answer 2

这是您的解决方案。检查代码段

(function () {

    var object = {

        formToShow: $('#form'),

        showForm: function () {
            object.formToShow.show();
        }

    };
   //update button source
    $('<button class="btn btn-default">Contact Me</button>').insertAfter('article:first').on('click', object.showForm);

  
  
})();

**Add css for form display**
#form{
 display:none; 
}

**HTML code : nothing change in it**
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-12">
            <article>
                <h1>First Article</h1>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </article>

            <form id="form">
              <div class="form-group">
                <label>Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
              </div>
              <div class="form-group">
                <label>Password</label>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
              </div>

              <button type="submit" class="btn btn-default">Submit</button>
            </form>
        </div>

弹出窗体不工作Jquery

2 个答案: