如何使用 JavaScript 或 jQuery 在循环中调用选定的 class 或名称？

Question

我的 javascript 代码是这样的：

$('input[name="is_follow_up"]').change(function(){
    var val = $(this).val(),
        input = $('.input-reason');
    if (val == 'n') 
        input.show()
    else 
        input.hide();
});
$('.select-reason').change(function(){
    var reason = $(this).val(),
        others = $('.textarea-others');
    if (reason == 4) {
        others.show();
        $(this).removeAttr('name');
        others.find('textarea').attr('name', 'reason');
    }
    else {
        others.hide()
        $(this).attr('name', 'reason');
        others.find('textarea').removeAttr('name');
    }
});

我的 html 代码是这样的：

@foreach($orders as $order)
...
    <label class="radio-inline">
        <input type="radio" name="is_follow_up" id="inlineRadio1" value="y" required checked> accept
    </label>
    <label class="radio-inline">
        <input type="radio" name="is_follow_up" id="inlineRadio2" value="n" required> reject
    </label>
    <div class="row input-reason" style="display: none">
        <div class="col-sm-2">Reason:</div>
        <div class="col-sm-5">
            <div class="form-group">
                <select class="form-control select-reason" name="reason">
                    <option value="Reason 1">Reason 1</option>
                    <option value="Reason 2">Reason 2</option>
                    <option value="Reason 3">Reason 3</option>
                    <option value="4">Reason 4</option>
                </select>
            </div>
            <div class="form-group textarea-others" style="display: none">
            <textarea rows="5" class="form-control"></textarea>
            </div>
        </div>
    </div>
...
@endforeach

如果我有5个数据订单。将有 5 次迭代。如果我在第一次迭代中选择拒绝，它将在所有迭代中显示 textarea

我要：

如果用户在第一次迭代中选择拒绝，则在第一次迭代中只显示文本区域

如果用户在第三次迭代中选择拒绝，则在第三次迭代中只显示文本区域

等等

我该怎么做？

Answer 1

使用this上下文。 :)（希望我能帮到你）。

试试这个，

  $('.select-reason').change(function(){
    var reason = $(this).val(),
        others = $('.textarea-others');
    if (reason == 4) {
        others.show();
        $(this).removeAttr('name');
        $(this).closest('div').next().find('textarea').attr('name', 'reason');
    }
    else {
        others.hide()
        $(this).attr('name', 'reason');
        $(this).closest('div').next().find('textarea').removeAttr('name');
    }
    });

实际上有很多方法可以找到特定的 div 和 closest(), parent() 等等，但我在这里做什么（简单来说）：

您的 this 是 select-reason 元素。
最接近的（'div'）将是 <div class="form-group">
next() 转到 <div class="form-group textarea-others" style="display: none">
和 find() 找到您正在寻找的文本区域

如果您采用 this 上下文，就会发现这很简单，因为它只适用于更改的元素。以前，$('.textarea-others') 将 select 页面中的所有文本区域。

PS：除非您更改 html 并在 select 和 textarea 之间添加另一个 div，否则这将起作用，因为 next() 将指向新的div现在。

相同 is_follow_up 更改：

$('input[name="is_follow_up"]').change(function(){
  var val = $(this).val(),
      input = $('.input-reason');
   if (val == 'n') 
     $(this).closest('div.display-someblock').find('.input-reason').show();
   else 
     input.hide();
});

为了简单起见，我用 <div class="display-someblock">

将元素包裹在 for 循环中

 @foreach($orders as $order)
 ...
   <div class="display-someblock">
   <label class="radio-inline">
      <input type="radio" name="is_follow_up" id="inlineRadio1" value="y" required checked> accept
   </label>
 .....
  </div>

Answer 2

首先你正在使用 @foreach loop 并且在循环中你给 radio button 相同的 name 这是不正确的因为所有单选按钮将具有相同的名称因此一次只能选中一个单选按钮。

在这种情况下，您可以将迭代索引附加到单选按钮的名称，并将名称设为 name="is_follow_up1", name="is_follow_up2" 等等。

您可以参考 How to find the foreach index 获取迭代值，因为您正在使用 php。

同样，您必须对 select 框和文本区域执行相同的操作，以便可以唯一标识它们，就像我的代码片段一样，您可以参考下面的代码更新您的 HTML。

我还在一些元素中添加了 iteration attribute 以获得代码段中存在的值。

稍后您可以更新代码段中的 Jquery 代码以获得所需的功能。

如果您对此有任何疑问，请告诉我。

$(document).ready(function() {
  $('input[name^="is_follow_up"]').change(function() {
    var val = $(this).val(),
      iteration = $(this).attr('iteration'),
      input = $('.input-reason' + iteration);
    if (val == 'n')
      input.show()
    else
      input.hide();
  });
  $('select[name^="reason"]').change(function() {
    var reason = $(this).val(),
      iteration = $(this).attr('iteration'),
      others = $('.textarea-others' + iteration);
    if (reason == 4) {
      others.show();
      $(this).removeAttr('name');
      others.find('textarea').attr('name', 'reason');
    } else {
      others.hide()
      $(this).attr('name', 'reason');
      others.find('textarea').removeAttr('name');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="radio-inline">
      <input type="radio" name="is_follow_up1" iteration='1' id="inlineRadio1" value="y" required checked> accept
  </label>
<label class="radio-inline">
      <input type="radio" name="is_follow_up1" iteration='1' id="inlineRadio2" value="n" required> reject
  </label>
<div class="row input-reason1" style="display: none">
  <div class="col-sm-2">Reason:</div>
  <div class="col-sm-5">
    <div class="form-group">
      <select class="form-control select-reason" name="reason1" iteration='1'>
                  <option value="Reason 1">Reason 1</option>
                  <option value="Reason 2">Reason 2</option>
                  <option value="Reason 3">Reason 3</option>
                  <option value="4">Reason 4</option>
              </select>
    </div>
    <div class="form-group textarea-others1" style="display: none">
      <textarea rows="5" class="form-control"></textarea>
    </div>
  </div>
</div>
<label class="radio-inline">
      <input type="radio" name="is_follow_up2" iteration='2' id="inlineRadio1" value="y" required checked> accept
  </label>
<label class="radio-inline">
      <input type="radio" name="is_follow_up2" iteration='2' id="inlineRadio2" value="n" required> reject
  </label>
<div class="row input-reason2" style="display: none">
  <div class="col-sm-2">Reason:</div>
  <div class="col-sm-5">
    <div class="form-group">
      <select class="form-control select-reason" name="reason2" iteration='2'>
                  <option value="Reason 1">Reason 1</option>
                  <option value="Reason 2">Reason 2</option>
                  <option value="Reason 3">Reason 3</option>
                  <option value="4">Reason 4</option>
              </select>
    </div>
    <div class="form-group textarea-others2" style="display: none">
      <textarea rows="5" class="form-control"></textarea>
    </div>
  </div>
</div>
<label class="radio-inline">
      <input type="radio" name="is_follow_up3" id="inlineRadio1" iteration='3' value="y" required checked> accept
  </label>
<label class="radio-inline">
      <input type="radio" name="is_follow_up3" id="inlineRadio2" iteration='3' value="n" required> reject
  </label>
<div class="row input-reason3" style="display: none">
  <div class="col-sm-2">Reason:</div>
  <div class="col-sm-5">
    <div class="form-group">
      <select class="form-control select-reason" name="reason3" iteration='3'>
                  <option value="Reason 1">Reason 1</option>
                  <option value="Reason 2">Reason 2</option>
                  <option value="Reason 3">Reason 3</option>
                  <option value="4">Reason 4</option>
              </select>
    </div>
    <div class="form-group textarea-others3" style="display: none">
      <textarea rows="5" class="form-control"></textarea>
    </div>
  </div>
</div>

如何使用 JavaScript 或 jQuery 在循环中调用选定的 class 或名称？

How do I call the selected class or name inside the loop with JavaScript or jQuery?

html

javascript

jquery

laravel-5.3