當我復制此影像 src 時，我有一個表和 10 行。它復制了最后一個 src
HTML
<table class="table table-striped">
<tbody>
@foreach($medias as $media)
<tr>
<td class="align-middle">{{ $media->id }}</td>
<td class="align-middle"><img src="{{ asset('storage/'.$media->image) }}" class="image" alt="image" width="100" height="50"></td>
<td class="align-middle">
<form action="{{ route('admin.medias.destroy', $media->id) }}" method="post">
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger btn-sm">del</button>
</form>
</td>
<td class="align-middle"><a onclick="copy(this)" class="btn btn-sm btn-info">copy</a></td>
</tr>
@endforeach
</tbody>
</table>
JS
<script>
function copy () {
navigator.clipboard.writeText(document.getElementsByClassName('image').src);
}
</script>
我復制了undefined。
注意：此代碼在輸出中沒有錯誤。
uj5u.com熱心網友回復：
你不能在 DOM 中重復 Id。因此，您可以動態設定 id，順便說一句，您需要將元素傳遞給您的 copy()。
嘗試下一個代碼，讓我知道它是否有效。我沒有測驗它，但它應該可以作業
刀
<table class="table table-striped">
<tbody>
@foreach($medias as $media)
<tr>
<td class="align-middle">{{ $media->id }}</td>
<td class="align-middle"><img src="{{ asset('storage/'.$media->image) }}" id="image-{{$media->id}}" alt="image" width="100" height="50"></td>
<td class="align-middle">
<form action="{{ route('admin.medias.destroy', $media->id) }}" method="post">
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger btn-sm">del</button>
</form>
</td>
<td class="align-middle"><a onclick="copy('image-{{$media->id}}')" class="btn btn-sm btn-info">copy</a></td>
</tr>
@endforeach
</tbody>
</table>
JS
<script>
function copy (element) {
navigator.clipboard.writeText(document.getElementsById(element).src);
}
</script>
uj5u.com熱心網友回復：
示例 A更符合 OP 布局。示例 B在問題更新之前開始。您應該記住的一件重要的事情是，您不能有任何相同#id的 s 它們必須是唯一的，示例中img#image也是如此img.image。
兩個示例中都有詳細說明
示例 A
// Bind the <tbody> to the click event
document.querySelector('tbody').onclick = copyPath;
function copyPath(e) {
// Stop link from jumping
e.preventDefault();
// Reference the link user clicked
const clk = e.target;
/*
If the tag user clicked has .copy class...
...find the closest <tr> from clk...
...then find .image in <tr>...
...get .image src value and add it to clipboard
*/
if (clk.matches('.copy')) {
const image = clk.closest('tr').querySelector('.image');
navigator.clipboard.writeText(image.src);
}
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<main class='container'>
<section class='row'>
<div class='col'>
<table class="table table-striped">
<tbody>
<tr>
<td class="align-middle"></td>
<td class="align-middle"><img class='image' src="https://placem.at/places?w=100&h=50&random=1&txt=1&txtclr=fc0" alt="image" width="100" height="50"></td>
<td class="align-middle">
<form action="about:blank" method="post">
<button class="delete btn btn-danger btn-sm">Delete</button>
</form>
</td>
<td class="align-middle"><a href='!#' class="copy btn btn-sm btn-info">Copy Image Path</a></td>
</tr>
<tr>
<td class="align-middle"></td>
<td class="align-middle"><img class='image' src="https://placem.at/places?w=100&h=50&random=2&txt=2&txtclr=fc0" alt="image" width="100" height="50"></td>
<td class="align-middle">
<form action="about:blank" method="post">
<button class="delete btn btn-danger btn-sm">Delete</button>
</form>
</td>
<td class="align-middle"><a href='!#' class="copy btn btn-sm btn-info">Copy Image Path</a></td>
</tr>
<tr>
<td class="align-middle"></td>
<td class="align-middle"><img class='image' src="https://placem.at/places?w=100&h=50&random=3&txt=3&txtclr=fc0" alt="image" width="100" height="50"></td>
<td class="align-middle">
<form action="about:blank" method="post">
<button class="delete btn btn-danger btn-sm">Delete</button>
</form>
</td>
<td class="align-middle"><a href='!#' class="copy btn btn-sm btn-info">Copy Image Path</a></td>
</tr>
</tbody>
</table>
</div>
</section>
<section class='row'>
<div class='col'>
<textarea class='form-control' rows='3' cols='50' placeholder='Paste Here'></textarea>
</div>
</section>
</main>示例 B
// Collect <figure> into an array
const frames = [...document.querySelectorAll('figure')];
// On each <figure>...
frames.forEach(fig => {
// Get the src of <img>
let path = fig.firstElementChild.src;
// Reference the <a>
let link = fig.lastElementChild.firstElementChild;
// Add data-src attribute with the value of path to the link
link.setAttribute('data-src', path);
});
// Bind the click event to <section>
document.querySelector('section').onclick = copyPath;
function copyPath(e) {
// Stop link from jumping
e.preventDefault();
// Reference the link user clicked
const clk = e.target;
/*
If the tag clicked has attribute [data-src]...
...add the link's data-src value to clipboard
*/
if (clk.hasAttribute('data-src')) {
navigator.clipboard.writeText(clk.dataset.src);
}
}section {
display: flex;
justify-content: center;
align-items: center;
margin: 10px
}
figure {
margin: 0
}
figcaption {
text-align: center;
}<h3>Click a link then right click <u>P</u>aste or <kbd>Ctrl/?</kbd> <kbd>v</kbd> to the <code><textarea></code> below:</h3>
<section>
<figure>
<img src='https://placem.at/places?w=160&h=90&random=1&txt=1&txtclr=fc0'>
<figcaption><a href='!#'>Image Source</a></figcaption>
</figure>
<figure>
<img src='https://placem.at/places?w=160&h=90&random=2&txt=2&txtclr=fc0'>
<figcaption><a href='!#'>Image Source</a></figcaption>
</figure>
<figure>
<img src='https://placem.at/places?w=160&h=90&random=3&txt=3&txtclr=fc0'>
<figcaption><a href='!#'>Image Source</a></figcaption>
</figure>
</section>
<textarea rows='3' cols='65' placeholder='Paste Here'></textarea>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/492930.html
標籤：javascript html 拉拉维尔
下一篇：未定義用戶ID