Question

$(document).ready(function() {  
    $("#light").hide();  
    $('.createmessage').click(function() {  
        $('#light').show();    
    });
    $('#fade').click(function() {
        $('#light').hide();
    });
    $('.cancelButton').click(function() {
        $('#light').hide();
    });
});

这就是我正在研究的jQuery，我非常肯定某些事情是错误的。 1它似乎看起来不正确，两个代码不起作用。

这里的jsfiddle链接 http://jsfiddle.net/6aNL5/

如果有人能解释我做错了什么，请务必。我想学习，这对我来说只是练习。我想。

Answer 1

我修复了按钮，所以当点击它时，对话框会像以前一样出现，但现在取消会返回到页面的原始视图。这是jsfiddle：http://jsfiddle.net/6aNL5/1/

$(document).ready(function() {  
    $("#light").hide();  
    $('.createmessage').click(function() {  
        $('#light').show();    
    })
    $('#fade').click(function() {
        $('#light').hide();
    });
    $('.cancelButton').click(function() {
        $('#light').hide();
        $('#fade').hide();
    });
});

这使我的工作尽我所知（至少在我们可以尝试jsfiddle的路径上）。看起来应该是这样吗？

Answer 2

jsfiddle设置为使用Mootools，所以这可能就是为什么没有什么工作在那里。除此之外，我认为这里的问题是代码邋。。您不需要将事件侦听器与HTML内联。例如，而不是：

<span class="createMessage" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">

在JavaScript中执行此操作：

$(document).ready(function() {  
    $("#light").hide();  
    $('.createMessage').click(function() { // This was misspelt before
        $('#light').show(); 
        $('#fade').show();
    });
    $('#fade').click(function() {
        $('#light').hide();
    });
    $('.cancelButton').click(function() {
        $('#light').hide();
        $('#fade').hide();
    });
});

无论如何，

.show()和.fade()只需切换display属性即可。现在，您将HTML结构与交互式JavaScript分离，这使得调试变得更加容易。

Answer 3

jsfiddle中的html代码正在制作它所以我们必须添加两个.hide或两个.show。所以我将它们包裹在一个div中。像这样

<span class="createMessage">
    <span>Create Message</span>
</span>
<div id="messagePop" class="messagePopper">
    <div id="light" class="white_content">
        <div class="topborder"><span>NewMessage</span></div>
        <div class="formbody">
            <form id="privatemessage" action="/privmsg" method="post" name="post" class="newmessage">
                <input placeholder="Message To:" name="username[]" onfocus="if(this.value == 'Message To:'){this.value = '';}" type="text" onblur="if(this.value == ''){this.value='Message To:';}" class="usernameinput">
                <input required placeholder="Subject:" onkeypress="if (event.keyCode==13){return false}" maxlength="64" name="subject" onfocus="if(this.value == 'Subject:'){this.value = '';}" onblur="if(this.value == ''){this.value='Subject:';}" type="text" class="usernameinput"/>
                <textarea class="noThis" name="message"  onfocus="if(this.value == 'Type your message here'){this.value = '';}" onblur="if(this.value == ''){this.value='Type your message here';}" >Type your message here</textarea>
        </div>
        <div id="bottombuttons">
            <span class="button"><input type="submit" value="Submit" name="post" class="submitbutton uiButton uiButtonConfirm uiButtonLarge">
            </form> 
            &nbsp;&nbsp;<button class="submitbutton cancelButton uiButton uiButtonConfirm uiButtonLarge">Cancel</button></span>
        </div> 
    </div>          
    <div id="fade" class="black_overlay"></div>
</div>

jQuery就像这样：

$(document).ready(function() {  
      $("#messagePop").hide();  
      $('.createMessage').click(function() {  
          $('#messagePop').show();    
      });
      $('#fade').click(function() {
          $('#messagePop').hide();
      });
      $('.cancelButton').click(function() {
          $('#messagePop').hide();
      });
});

在每个人的帮助下，我意识到我是一个什么样的涂料，纠正自己。并希望向大家展示。

http://jsfiddle.net/6aNL5/3/

.show .hide函数可能在代码中没有工作错误

3 个答案: