0 
$(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/

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

4

3 回答 3

2

我修复了按钮，所以当它被点击时，对话框像以前一样出现，但现在取消回到页面的原始视图。这是用于此的 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 上尝试的路径上）。它看起来像应该的吗？​</p>

于 2012-11-24T03:23:27.183 回答
1

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 分离，这使得调试更加容易。

于 2012-11-24T03:28:39.767 回答
1

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/

于 2012-11-24T03:44:21.913 回答