jquery同じフォームを表示する複数のボタンが1つのボタンですべてのボタンのフォームをトリガーしています

Question

jqueryを初めて使用しました。 1つのページに複数のプロファイルが表示されるソーシャルメディアのWebサイトを構築するには、クリックしたときにコメントボックスを表示するボタンがあります。このためにコードjsfiddleを使用して、コメントボタンをクリックするたびに同じフォームを開くことができます。しかし、ボタンをクリックするだけですべてのフォームを表示することができました。ボタンをクリックすると1つのフォームしか開きません。この問題を解決するのを手伝ってください。以下は

This is how my form opens when I click on a single button

私のjQueryのロジックです。

function deselect(e) { 
    $('.pop').slideFadeToggle(function() { 
     e.removeClass('selected'); 
    }); 
} 

$(function() { 
    $('.contact').click(function (e) { 
     if ($(this).hasClass('selected')) { 
      deselect($(this)); 
     } else { 
      $(this).addClass('selected'); 
      $('.pop').slideFadeToggle(); 
     } 
     return false; 
    }); 

    $('.close').on('click', function() { 
     deselect($('#contact')); 
     return false; 
    }); 
}); 

$.fn.slideFadeToggle = function (easing, callback) { 
    return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback); 
}; 

HTML

<div class="messagepop pop"> 
    <form method="post" id="new_message" action="/messages"> 
     <p><label for="body">Enter your comment below</label><textarea rows="6" name="body" id="body" cols="35"></textarea></p> 
     <p><input type="submit" value="Send Message" name="commit" id="message_submit" /> or <a class="close" href="/">Cancel</a></p> 
    </form> 
</div> 

<button href="/contact" class="contact btn-comment"> 
    <img class="commentImg" src="msg.jpg" alt="submit" /> 
</button> 

CSS

.commentImg { 
    padding: 0; 
    width: 20px; 
    height: 20px; 
} 

.btn-comment { 
    border: 0; 
    background: transparent; 
    float: right; 
} 
a.selected { 
    background-color:#1F75CC; 
    color:white; 
    z-index:100; 
} 

.messagepop { 
    background-color:#FFFFFF; 
    border:1px solid #999999; 
    cursor:default; 
    display:none; 
    margin-top: 15px; 
    position:absolute; 
    text-align:left; 
    width:394px; 
    z-index:50; 
    padding: 25px 25px 20px; 
} 

label { 
    display: block; 
    margin-bottom: 3px; 
    padding-left: 15px; 
    text-indent: -15px; 
} 

.messagepop p, .messagepop.div { 
    border-bottom: 1px solid #EFEFEF; 
    margin: 8px 0; 
    padding-bottom: 8px; 
} 

Answer 1

あなたは、唯一のtoggle親div.popに必要

ので

それは次のようにclosest()を使用して行われる必要があり、

//toggle only parent! 
$(this).closest('.pop').slideFadeToggle(); 

次のようにあなたはあなたの関数を変更する必要があり

、

$(function() { 
      $('.contact').click(function (e) { 
       if ($(this).hasClass('selected')) { 

        deselect($(this)); 
       } else { 
        $(this).addClass('selected'); 
        //toggle only parent! 
        $(this).closest('.pop').slideFadeToggle(); 
       } 
       return false; 
       }); 

      $('.close').on('click', function() { 
       deselect($('#contact')); 
       return false; 
      }); 
     }); 

はまた、あなたは、あなたのdeselect()も更新する必要があり

function deselect(e) { 
      e.closest('.pop').slideFadeToggle(function() { 
       e.removeClass('selected'); 
      }); 
     }