jquery multiple buttons to display same form 一键点击触发所有按钮的表单

Question

我是 jquery 的新手。为了建立一个社交媒体网站，您会在一个页面上看到多个配置文件，每个配置文件上都有一个按钮，单击该按钮时应显示一个评论框。为此，我使用了 jsfiddle代码并尝试修改它，以便我可以在每次单击评论按钮时打开相同的表单。但事实证明，只需单击一个按钮即可显示所有表单，因为我只想在单击按钮时打开一个表单。请帮我解决这个问题。

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

你只需要切换父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');
            });
        }