如何使用Jquery显示或隐藏PHP动态生成的div

Question

我有一个由PHP动态生成和填充的表单。在表单的一部分中，我有一个for循环，根据数据库中记录的数量，它会重复。在这一部分中，我在单选按钮中有一个选择，我希望根据选择隐藏一个div并显示另一个div，反之亦然。

以下是我编写的PHP和JQuery代码。

<?php for ($i = 0; $i < $data['partsCount']; $i++) :
?>
<div class="row">
<div class="col">
<div class="form-group">
<label for="service_id">Serviço</label>
<input type="text" class="form-control" name="service" value="<?php echo $data['services'][$i]->name; ?>" disabled />
</div>
</div>
<div class="col">
<div class="form-group">
<label for="type_id">Tipo</label>
<input type="text" class="form-control" name="type" value="<?php echo $data['types'][$i]->name; ?>" disabled />
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="form-group">
<label for="amount">Quantidade</label>
<input type="number" name="amount" id="amount" class="form-control" value="<?php echo $data['parts'][$i]->amount; ?>" disabled />
</div>
</div>
<div class="col">
<div class="form-group">
<label for="value">Valor Unitário</label>
<input type="text" name="value" id="value" class="form-control <?php echo (!empty($data['value_err'])) ? 'is-invalid' : ''; ?>" value="<?php echo $data['parts'][$i]->value; ?>" disabled />
<span class="invalid-feedback"><?php echo $data['value_err']; ?></span>
</div>
</div>
<div class="col">
<div class="form-group">
<label for="value">Valor Total</label>
<input type="text" name="total" value="<?php echo $data['parts'][$i]->valueTotal; ?>" class="form-control" disabled />
</div>
</div>
</div>
<div class="row">
<div class="col">
<hr />
</div>
</div>
<div class="row">
<div class="col">
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="status1" name="status[]" class="custom-control-input" value="2" checked>
<label class="custom-control-label" for="status1">Aprovado</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="status2" name="status[]" class="custom-control-input" value="3">
<label class="custom-control-label" for="status2">Reprovado</label>
</div>
</div>
</div>
<div id="rejected-<?php echo $i; ?>" class="row my-4">
<div class="col">
<label for="desc">Motivo para a não aprovação do orçamento</label>
<textarea name="reject_notes[]" id="editor1" class="form-control form-control-lg <?php echo (!empty($data['text_err'])) ? 'is-invalid' : ''; ?>" cols="80" rows="10"></textarea>
</div>
</div>
<div id="accepted-<?php echo $i; ?>" class="row my-4">
<div class="col-4">
<label for="data_out">Data de Entrega</label>
<div class="form-group">
<div class="input-group input-group-lg date">
<input type="text" name="delivery_date[]" class="form-control datetimepicker-input" id="datetimepicker<?php echo $i; ?>" />
<div class="input-group-append">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
<div class="col-12">
<label for="desc">Caminho para as artes</label>
<input type="text" class="form-control" name="path_files[]" id="">
<label for="desc">Caminho para a PM/RM</label>
<input type="text" class="form-control" name="path_pm[]" id="">
<label for="desc" class="mt-3">Descritivo e orientações de criação</label>
<textarea name="accept_notes[]" id="editor2" class="form-control form-control-lg <?php echo (!empty($data['text_err'])) ? 'is-invalid' : ''; ?>" cols="80" rows="10"></textarea>
</div>
</div>
<?php endfor;
?>

JQuery

$('#status1').click(function () {
$(this).next('div[id^=accepted]').show('slow');
$(this).next('div[id^=rejected]').hide('slow');
});
$('#status2').click(function () {
$(this).next('div[id^=accepted]').hide('slow');
$(this).next('div[id^=rejected]').show('slow');
});

使用此代码，当我选择其中一个选项时，它会影响由循环创建的代码的所有部分。我需要你影响引用的区块

Answer 1

您将需要使用相对路径。将侦听器放在所有class匹配项上，剩下的就已经完成了。

您的无线电可以保留labelfor属性的ID，但它们必须是唯一的，因此请使用该$i的迭代器。给他们上课，把两者分开。我选择了status-a和status-r——我们将在侦听器中使用它们

<div class="status-a custom-control custom-radio custom-control-inline">
<input type="radio" id="status-a<?php echo $i;?>" name="status[]" class="custom-control-input" value="2" checked> 
<label class="custom-control-label" for="status-a<?php echo $i;?>">Aprovado</label>
</div>
<div class="status-r custom-control custom-radio custom-control-inline">
<input type="radio" id="status-r<?php echo $i;?>" name="status[]" class="custom-control-input" value="3">
<label class="custom-control-label" for="status-r<?php echo $i;?>">Reprovado</label>
</div>

现在您可以使用基于类的相对路径

$('.status-a').click(function() {
$(this).next('div[id^=accepted]').show('slow');
$(this).next('div[id^=rejected]').hide('slow');
});
$('.status-b').click(function() {
$(this).next('div[id^=accepted]').hide('slow');
$(this).next('div[id^=rejected]').show('slow');
});

Answer 2

我能够通过解决问题

PHP块

<div class="row">
<div class="col">
<div class="status-a custom-control custom-radio custom-control-inline">
<input type="radio" id="status-a<?=$i?>" name="status-<?=$i?>[]" class="custom-control-input" value="2" checked>
<label class="custom-control-label" for="status-a<?=$i?>">Aprovado</label>
</div>
<div class="status-b custom-control custom-radio custom-control-inline">
<input type="radio" id="status-b<?=$i?>" name="status-<?=$i?>[]" class="custom-control-input" value="3">
<label class="custom-control-label" for="status-b<?=$i?>">Reprovado</label>
</div>
</div>
</div>
<div id="rejected-<?=$i?>" class="row my-4">
<div class="col">
<label for="desc">Motivo para a não aprovação do orçamento</label>
<textarea name="reject_notes[]" id="editor1" class="form-control form-control-lg <?php echo (!empty($data['text_err'])) ? 'is-invalid' : ''; ?>" cols="80" rows="10"></textarea>
</div>
</div>
<div id="accepted-<?=$i?>" class="row my-4">
<div class="col-4">
<label for="data_out">Data de Entrega</label>
<div class="form-group">
<div class="input-group input-group-lg date">
<input type="text" name="delivery_date[]" class="form-control datetimepicker-input" id="datetimepicker<?php echo $i; ?>" />
<div class="input-group-append">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
<div class="col-12">
<label for="desc">Caminho para as artes</label>
<input type="text" class="form-control" name="path_files[]" id="">
<label for="desc">Caminho para a PM/RM</label>
<input type="text" class="form-control" name="path_pm[]" id="">
<label for="desc" class="mt-3">Descritivo e orientações de criação</label>
<textarea name="accept_notes[]" id="editor2" class="form-control form-control-lg <?php echo (!empty($data['text_err'])) ? 'is-invalid' : ''; ?>" cols="80" rows="10"></textarea>
</div>
</div>

JQuery块

let partsCount = document.getElementById('data-count').value;
console.log(partsCount);
for (let i = 0; i < partsCount; i++) {
$('#status-a' + i).click(function () {
$('#accepted-' + i).show('slow');
$('#rejected-' + 1).hide('slow');
console.log('Click: accepted-' + i);
});
$('#status-b' + i).click(function () {
$('#accepted-' + i).hide('slow');
$('#rejected-' + i).show('slow');
console.log('Click: rejected-' + i);
});
}

感谢您帮助