Question

点击＆＃34;取消＆＃34;我要关闭评论框按钮，如果评论框中有0个符号，也不要发帖。这段代码工作正常：

Socialite

当我在html中添加FORM：

$(function () {
    $('.panel-google-plus > .panel-footer > .input-placeholder, .panel-google-plus > .panel-google-plus-comment > .panel-google-plus-textarea > button[type="reset"]').on('click', function(event) {
        var $panel = $(this).closest('.panel-google-plus');
        $comment = $panel.find('.panel-google-plus-comment');

        $comment.find('.btn:first-child').addClass('disabled');
        $comment.find('textarea').val('');

        $panel.toggleClass('panel-google-plus-show-comment');

        if ($panel.hasClass('panel-google-plus-show-comment')) {
            $comment.find('textarea').focus();
        }
    });
    $('.panel-google-plus-comment > .panel-google-plus-textarea > textarea').on('keyup', function(event) {
        var $comment = $(this).closest('.panel-google-plus-comment');

        $comment.find('button[type="submit"]').addClass('disabled');
        if ($(this).val().length >= 1) {
            $comment.find('button[type="submit"]').removeClass('disabled');
        }
    });
});

JS不再工作，评论框不会关闭。如何解决这个问题？没有<form method="POST" action="/komentuoti/{{$p->id}}"> {!! csrf_field() !!} <div class="panel-google-plus-textarea form-group"> <textarea rows="2" cols="60" class="form-control" name="body" placeholder="Rašykite komentarą"></textarea> <br> <button type="submit" class="btn btn-success disabled">Post</button> <button type="reset" class="btn btn-default">Cancel</button> <hr> <strong><h5>Komentarai</h5></strong> @foreach($p->comment as $com) <ul class="list-unstyled"> <li><strong>{{$com->user->name}}</strong> {{$com->body}}</li> </ul> @endforeach </div> <div class="clearfix"></div> </form>

，它工作正常

Answer 1

我很确定它是因为选择器.panel-google-plus-comment > .panel-google-plus-textarea在没有内部表单的情况下正确通过，但是失败了。考虑下面的两个片段：

<!-- Snippet 1 -->
<div class="outer">
  <div class="inner"></div>
</div>

<!-- Snippet 2 -->
<div class="outer">
  <div class="hello">
    <div class="inner"></div>
  </div>
</div>

在第一个代码段中，选择器.outer > .inner匹配，因为inner元素是outer元素的直接子元素。在第二个中，选择器.outer > .inner 不匹配，因为inner是hello的孩子，而不是outer ＆＃39;第相反，.outer > .hello > .inner会匹配，因为hello是outer的孩子，inner是hello的孩子。

现在，如果你使用了.outer .inner，那么在任何一种情况下都不会成为一个问题，因为你不是想要匹配直接的孩子，而是你所关心的一切都是＆＃39; sa后裔。这包括像第一个片段的孩子，像第二个片段，曾孙子等的孙子。或者，换句话说，.outer .inner甚至会匹配此中的<input>：

<div class="outer">
  <span class="what">
    <a class="in">
      <em class="the">
        <strong class="world">
          <form>
            <input class="inner">
          </form>
        </strong>
      </em>
    </a>
  </span>
</div>

如果您只想使用儿童选择器，那么您至少必须使用.outer > .what > .in > .the > .world > form > .inner。

添加FORM时JS停止工作

1 个答案: