Laravel – как создать свойство динамического идентификатора в кнопке для добавления элемента с помощью javascript, идентификатор задается путем прохождения через модальное окно
во-первых, я создал форму редактирования, используя модальное окно в laravel
Я использую 2 разных файла:
- содержит компонент кнопки для запуска формы редактирования
@include('employer.edit-form')
<button data-modal-target = "modal-edit-{{$task->id}}" data-modal-toggle = "modal-edit-{{$task->id}}">
<a class = "fa-solid fa-pen-to-square fa-lg"></a>
</button>
- модальное окно, которое показывает форму редактирования при нажатии кнопки
<div id = "modal-edit-{{$task->id}}" data-modal-backdrop = "static" tabindex = "-1" aria-hidden = "true">
<!-- Task Title -->
<input type = "text" id = "task_name" name = "task_name" value = {{$task->task_name}} required />
<!-- Button to append element -->
<button id = "{{$task->id}}" type = "button"> + Add Here</button>
<div id = "example">appended text shows here</div>
Я уже передал идентификатор данных, чтобы показать каждый объект через свойства data-modal-target и data-modal-toggle. Он работает нормально, но проблема возникла, когда я попытался добавить элемент с помощью JavaScript.
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#{{$task->id}}").click(function(){
$("#example").append(
`<p>successfully added</p>`
);
});
});
</script>
Элемент можно добавить только в 1-й объект, когда я попытался нажать кнопку «+ Добавить сюда» в другом объекте (который использует тот же модальный режим), добавленный элемент не появится, вместо этого он появится в 1-м объекте.
Когда я попытался изменить компонент кнопки на этот
<button data-modal-target = "modal-edit-{{$task->id===2}}" data-modal-toggle = "modal-edit-{{$task->id===2}}">
и изменил модальное окно на это
<div id = "modal-edit-{{$task->id===2}}" data-modal-backdrop = "static" tabindex = "-1" aria-hidden = "true">
и единственный модальный элемент, к которому можно добавить элемент, - это второй объект, поэтому я думаю, что проблема в том, как я передал идентификатор, потому что свойство id в кнопке превращает идентификатор в строковое значение. Но я все еще в замешательстве и стрессе
Кто-нибудь может мне помочь, пожалуйста, заранее спасибо
@brombeer, к сожалению, нет, идентификатор уже уникален
Вы упомянули несколько объектов, все ли они используют ваш модальный код 2.? Если да, то у вас будет несколько <div id = "example">.
@brombeer да, все они используют одно и то же модальное окно, и когда я нажал кнопку «+ Добавить сюда» во втором, третьем и т. д., они появятся только в модальном окне, которое показано в первом объекте как несколько <div id = "example "> столько раз, сколько я нажимал кнопку
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Пропустив эту проблему и вернувшись к ее решению, я обнаружил, что #example (идентификатор элемента div, к которому вы хотите добавить элемент) также должен иметь уникальный идентификатор.
Поэтому вместо
$(document).ready(function(){
$("#{{$task->id}}").click(function(){
$("#example").append(
`<p>successfully added</p>`
);
});
});
Замените #example на #example-{{$task->id}} следующим образом:
$(document).ready(function(){
$("#{{$task->id}}").click(function(){
$("#example-{{$task->id}}").append(
`<p>successfully added</p>`
);
});
});
и не забудьте изменить идентификатор самого div
<div id = "example-{{$task->id}}">appended text shows here</div>
Есть ли на странице несколько элементов с
id = "example"? Тогда это было бы неверно,idдолжны быть уникальными.