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

您只需要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');
            });
        }

jquery显示相同表单的多个按钮，只需单击一下按钮即可触发所有按钮的表单

1 个答案: