Динамические теги Div в цикле while
У меня есть цикл while, который заполняет 4 вкладки div (в одном родительском div) с помощью PHP.
У меня также есть сценарий копирования в буфер обмена для копирования текста из тега P. К сожалению, эта функция работает только в том случае, если тег и кнопка имеют уникальный идентификатор.
Итак, мой вопрос заключается в следующем: Как назначить последовательный идентификатор моим зацикленным тегам P? В том смысле, что я хочу, чтобы первый набор вкладок в первом заполненном div имел идентификаторы 1,2,3,4, а следующий - 5,6,7,8... и так далее.
Вот HTML в цикле PHP:
<div id='content' class='tab-content'>
<div id='navpills-1' class='tab-pane active'>
<p id='text'>Text to be copied to clipboard.</p>
<button id='jsbtn' class='btn jsbtn' onclick='copyToClipboard('p#text')'>Copy</button>
</div>
</div>
Вот сценарий, который я использую для копирования текста из тега P в буфер обмена:
<script>
function copyToClipboard(element) {
var $temp = $("<textarea>");
var brRegex = /<br\s*[/]?>/gi;
$("body").append($temp);
$temp.val($(element).html().replace(brRegex, "\r\n")).select();
document.execCommand("copy");
$temp.remove();
}
</script>
Добавьте обработчики событий способом правильный jQuery, не используя встроенные атрибуты. $('.jsbtn').on('click', function() {...}); Затем у вас есть доступ к выбранному элементу с помощью $(this), поэтому вы можете использовать $(this).parent().find('p').html(), чтобы перейти от кнопки к родительскому div, найти там элемент p и получить его содержимое. Идентификаторы на кнопке и абзаце могут быть полностью удалены.
Также теперь есть улучшенный API для копирования текста в/из буфера обмена — см. MDN для получения подробной информации об API буфера обмена
Спасибо профессору Абронсиусу и CBroe за ваши ответы! @Cbroe... не могли бы вы написать это для меня? Что я должен поместить в кнопку, а затем в скрипт? Я относительно новичок в PHP, но ничего не знаю о Javascript/jQuery. Спасибо!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Если вы не привержены использованию jQuery, вы можете легко достичь своей цели с помощью довольно простого, ванильного Javascript. API буфера обмена предоставляет современное решение для копирования текста (и прочего) в системный буфер обмена и из него.
В общем, работа с идентификаторами может стать проблематичной, поскольку они должны быть уникальными в DOM, поэтому, когда одна и та же функциональность должна применяться к нескольким элементам, вы должны попытаться сделать то, что вы изначально надеялись сделать - назначить последовательные идентификаторы или что-то в этом роде. решение и ссылайтесь на этот идентификатор в вызове функции. Это плохо масштабируется, и существуют лучшие варианты.
В следующем нигде не используются атрибуты ID — вместо этого обработчик событий, назначенный каждой кнопке, использует event, чтобы определить, какой элемент был нажат (вызвал обработчик), и из этого узла можно, учитывая, что вы знаете структуру DOM, найти другие узлы представляет интерес. В приведенном ниже коде event.target относится к кнопке — оттуда мы находим ее родителя, а из этого родителя мы находим конкретный элемент P, содержимое которого нужно скопировать. Метод, предложенный @CBroe, делает это с использованием методов jQuery, с которыми я не знаком.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Basic Clipboard Copy Example</title>
</head>
<body>
<div class='tab-content'>
<div class='tab-pane active'>
<p class='copy'>Text to be copied to clipboard.</p>
<button class='btn jsbtn'>Copy</button>
</div>
<div class='tab-pane active'>
<p class='copy'>Some other text to be copied to clipboard.</p>
<button class='btn jsbtn'>Copy</button>
</div>
<div class='tab-pane active'>
<p class='copy'>Guess what...more text and not an ID in sight</p>
<button class='btn jsbtn'>Copy</button>
</div>
<div class='tab-pane active'>
<p class='copy'>And the final Paragraph and final chapter and final word.</p>
<button class='btn jsbtn'>Copy</button>
</div>
</div>
<textarea cols=100 rows=10></textarea>
<script>
document.querySelectorAll('button.jsbtn').forEach( bttn=>bttn.addEventListener('click',e=>{
const pttn=/<br\s*[/]?>/gi;
const paragraph=e.target.parentNode.querySelector('p.copy');
const textarea=document.querySelector('textarea');
// writeText copies text to the clipboard
navigator.clipboard.writeText( paragraph.innerHTML.replace( pttn, String.fromCharCode( 10 ) ) )
.then(
()=>{
/*
All good... and to illustrate reading this copied text...
readText - reads from the clipboard
*/
navigator.clipboard.readText()
.then( text=>{
textarea.value=text;
})
},
(e)=>{console.info( 'error: %s',e.message )}
)
}));
</script>
</body>
</html>
...ты гений! Большое спасибо за то, что нашли время и усилия, чтобы предоставить код и решение моей проблемы! У меня есть последний запрос: если вы видите мой пример кода, в нем есть переменная Regex, которую я использовал для обеспечения интервала между абзацами при копировании из тега P. (Текст сохраняется с тегами разрыва в БД, поэтому он хорошо отображается, когда я его извлекаю.) Когда я копирую текст в буфер обмена, я хочу очистить все форматирование, кроме интервала между абзацами. Раньше это работало с «Regex»; пробовал, но не могу заставить это работать в вашем сценарии. Пожалуйста помоги. Спасибо!
Сделал небольшое изменение в приведенном выше: проверил textContent на innerHTML, чтобы регулярное выражение работало, и использовал символ ascii для разрыва строки, а не строку \r\n - думаю, что это работает, как и ожидалось.
Еще раз, @Professor Abronsius, вы гений! Работает как часы! Большое спасибо за то, что сделали мою жизнь проще, за ваше время и усилия. Действительно ценю это! :-)
возможно, вы хотели бы принять ответ/+1 и т. д.?
Вам не нужно использовать идентификатор только для того, чтобы функция работала. Кнопка активирует
event, и вы можете легко определить элемент, который нужно скопировать, используя родительские/родственные селекторы.