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

それが私が取り組んでいるjQueryであり、何かが大きく間違っていると確信しています。1正しく見えないようで、2つのコードが機能していません。

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コードがそれを作成していたので、2つの.hideまたは2つの.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 に答える