Question

我正在使用Laravel 5并且我有以下HTML页面：

＆＃xA;＆＃xA;

HTML 1

＆＃xA;＆＃xA;

 ＆lt; div class =“row”＆gt; ＆＃XA; @foreach（$ postList as $ post）＆＃xA; @include（'Pages.Post.postInGroup'，['post'=＆gt; $ post，'commentsList'=＆gt; $ commentsList]）＆＃xA; @ endforeach＆＃xA;＆lt; / div＆gt;＆＃xA;

＆＃xA;＆＃xA;

HTML 2

＆＃xA;＆＃xA;

 ＆lt; form id =“msform”action =“{{route（'comments.store'）}}”method =“post”＆gt;＆＃xA; {{csrf_field（）}}＆＃xA; ＆lt; div class =“row align-items-center”＆gt; ＆＃XA; ＆lt; div class =“col-3 col-sm-3 col-md-2 col-lg-2 col-xl-1”style =“display：inline-block;”＆gt;＆＃xA; ＆lt; img src =“{{url（Auth :: user（） - ＆gt; picture_path）}}”style =“border-radius：50％;” width =“30”height =“30”alt =“用户图片”＆gt;＆＃xA; ＆LT; / DIV＆GT;＆＃XA; ＆lt; div class =“col-9 col-sm-9 col-md-6 col-lg-6 col-xl-9”style =“display：inline-block;”＆gt;＆＃xA; ＆lt; textarea class =“form-control”placeholder =“发表评论”id =“comment_content {{$ post-＆gt; id}}”name =“comment_content”rows =“1”＆gt;＆lt; / textarea＆gt;＆ #xA; ＆LT; / DIV＆GT;＆＃XA; ＆lt; div class =“col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1”＆gt;＆＃xA; ＆lt; input type =“submit”name =“comment_button {{$ post-＆gt; id}}”class =“btn btn-primary”value =“Comment”style =“background-color：＃228B22;”/＆gt; ＆＃XA; ＆lt; input type =“hidden”value =“{{$ post-＆gt; id}}”name =“postId”id =“postId”＆gt;＆＃xA; ＆lt; input type =“hidden”value =“{{$ theGroup-＆gt; id}}”name =“groupId”id =“groupId”＆gt;＆＃xA; ＆LT; / DIV＆GT;＆＃XA; ＆lt; / div＆gt;＆＃xA;＆lt; / form＆gt;＆＃xA;＆＃xA;＆lt; script src =“{{url（'js / jquery-3.3.1.min.js'）}}”＆gt ;＆LT; /脚本＆GT;＆＃XA;＆＃XA;＆LT;脚本＆GT;＆＃XA; $（document）.ready（function（）{＆＃xA; $（'＃msform＆gt; div＆gt; div＆gt; input [name = comment_button {{$ post-＆gt; id}}]'）。prop（' disabled'，true）;＆＃xA;＆＃xA; //当用户输入disable并根据值启用时。＆＃xA; $（'＃msform＆gt; div textarea'）。on（“input”， function（）{＆＃xA; $（this）.parents（'。row'）。find（'input [name = comment_button {{$ post-＆gt; id}}]'）。prop（'disabled'，$ （this）.val（）==''）;＆＃xA;}）;＆＃xA;}）;＆＃xA;＆lt; / script＆gt;＆＃xA;

＆＃ xA;＆＃xA;

HTML 1 代码解释了如何根据 $ postList HTML 2 代码>。＆＃xA;我想要做的是禁用按钮对应到textarea，只要它的textarea是空的，但我没有得到期望的结果，因为当我填写任何textarea时，所有按钮都会重新受到影响，而这不是我想要的。出于数据推断的原因，我无法更改textarea的 name ，我希望此脚本仅适用于HTML 2中的提交按钮。

＆＃xA;＆＃xA; <为了更好地解释我的问题，我会做一个例子：

＆＃xA;＆＃xA;

我已经用HTML 1循环了3次HTML 2，所以我会：

＆＃xA;＆＃xA;

Textarea（id =“comment_content 1”） - 按钮（name =“comment_button 1”）
Textarea （id =“comment_content 2”） - 按钮（name =“comment_button 2”）
Textarea（id =“comment_content 3”） - 按钮（name =“comment_button 3”）

＆＃xA;＆＃xA;

如果我想用id comment_content 2 写第二个textarea，那么我必须启用仅与该textarea相邻的按钮， comment_button 2 。我希望我的问题很明确。

＆＃xA;

Answer 1

您多次包含相同的外部脚本和相同的内联脚本，与帖子一样多次。这是低效的，您应该每页只包含一次外部Javascript。

您可以通过创建侦听所有 textareas的侦听器来重构此代码以解决您的错误，然后使用textarea上的数据属性来确定哪个按钮应该有状态更改。

步骤1：将帖子ID添加到数据属性

中的textarea

<textarea data-post="{{ $post->id }}" 
  class="form-control" 
  placeholder="Post a comment" 
  id="comment_content {{$post->id}}" 
  name="comment_content" rows="1"></textarea>

步骤2：将帖子ID添加到数据属性

中的按钮

<input data-post="{{ $post->id }}" 
  type="submit" 
  name="comment_button {{$post->id}}" 
  class="btn btn-primary" 
  value="Comment" 
  style="background-color: #228B22;"/>

步骤3：在确定用户与之交互的内容时，重构您的Javascript以使用data-post值，例如：

$(document).ready(function() {
    $('#msform > textarea[data-post]').on("input", function() {
        var id = $(this).data('post');
        $('input[data-post="' + id + '"]').prop('disabled', $(this).val() == '');
    });
});

以下是一个如何工作的示例，点击＆＃34;运行代码段＆＃34;看到它在行动。

＆＃13;

$(document).ready(function() {
    $('textarea[data-post]').on("input", function() {
        var id = $(this).data('post');
        $('input[data-post="' + id + '"]').prop('disabled', $(this).val() == '');
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <textarea data-post="1"></textarea>
  <input data-post="1" type="submit" disabled="true"/>
</div>
<div>
  <textarea data-post="2"></textarea>
  <input data-post="2" type="submit" disabled="true"/>
</div>
<div>
  <textarea data-post="3"></textarea>
  <input data-post="3" type="submit" disabled="true"/>
</div>

＆＃13;

为什么我的<script>不启用/禁用特定的提交按钮？

1 个答案: