当点击这个元素时，从HTML元素中获取信息

Question

我有像这个例子，我需要做的是，当我点击任何购物车显示模态，并从该卡获取数据，并在模态中添加>>>>在这个例子中，一切都在工作，除了如何获取数据和添加在模态:

<div class="row " data-aos="fade-up" data-aos-delay="100">
@forelse ($services as $service )
<div class="col-lg-4 col-md-12 mb-4 shadow-md">
<div class="card">
<div class="bg-image hover-zoom ripple ripple-surface ripple-surface-light"
data-mdb-ripple-color="light">
<img src="{{ url('storage/services/'.$service->image) }}" class="w-100" />
<a href="#!">
<div class="mask">
<div class="d-flex justify-content-start align-items-end h-100">
@if($service->status == 1)
<h5><span class="badge text-bg-primary m-2">
Available
</span></h5>
@else
<h5><span class="badge text-bg-danger m-2">
Not Available
</span></h5>
@endif
</div>
</div>
<div class="hover-overlay">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</div>
</a>
</div>
<div class="card-body">
<a href="" class="text-reset stretched-link"
data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">
<h5 class="card-title mb-3">{{ $service->name }}</h5>
</a>
<a href="" class="text-reset">
<p>{{ $service->info }}</p>
</a>
<h6 class="mb-3">
From <span class="badge text-bg-success">{{ $service->from }}$</span>
To <span class="badge text-bg-success">{{ $service->to }}$</span>
</h6>
</div>
</div>
</div>
@empty
<h2 class="text-center">There are no Services !!!</h2>
@endforelse
</div>
</div>
</section>
@endif
</div>
</main>
{{--  modal here  --}}
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="recipient-name" class="col-form-label">Service:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="mb-3">
<label for="recipient-name" class="col-form-label">price:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="mb-3">
<label for="message-text" class="col-form-label">info:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>

Answer 1

要解决这个问题，您应该在单击card时发送ajax请求。然后从响应和开放模态中提取数据。你还必须使用JavaScript版本的modal，因为你必须在发送请求的地方通过点击handler of card打开modal。此外，您必须添加路由到控制器接受请求并返回JSON响应。