Question

我想在点击复制按钮时复制文本。但是，当按下三个按钮中的任何一个按钮时，它会复制最后一个（第3个）段落文本。它假设找到以前的兄弟，并在单击该特定按钮时复制该文本。

这是我的代码。我想，我在兄弟姐妹的事情上出错了。让我知道我在这里做错了什么：

//finding text to copy
$(document).ready(function(){
    $(document).on('click', '.phc-hashtags-box-button', function () {
		$(this).closest('.phc-hashtags-box').find('.phc-hashtags-box-tags');
		copy = copy +$(this).text();
    });
});

function copyToClipboard(element) {
    var $temp = $('<input>');
    $('body').append($temp);
    $temp.val($(element).text()).select();
    document.execCommand('copy');
    $temp.remove();
}

<!doctype html>
<html>
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>    		
	</head>
	<body>    		    		
		<div class="phc-home-hashtags">
			<div class="container">
				<div class="phc-hashtags-box">
					<h3 class="phc-hashtags-box-title">Dog1</h3>
					<p class="phc-hashtags-box-tags">#dog #dogstagram #instadog #dogsofinstagram #worldofdogs #dogslove #cutedog #doggy #igdogs #dogs #pet #dogoftheday #myfriend #doglover #ilovemydog #ilovedog #doglove #doglife #mydog #happydog #1st</p>
					<button onclick="copyToClipboard('.phc-hashtags-box-tags')" class="phc-hashtags-box-button">Copy</button>
				</div>
				<div class="phc-hashtags-box">
					<h3 class="phc-hashtags-box-title">Dog2</h3>
					<p class="phc-hashtags-box-tags">#dog #dogstagram #instadog #dogsofinstagram #worldofdogs #dogslove #cutedog #doggy #igdogs #dogs #pet #dogoftheday #myfriend #doglover #ilovemydog #ilovedog #doglove #doglife #mydog #happydog #2nd</p>
					<button onclick="copyToClipboard('.phc-hashtags-box-tags')" class="phc-hashtags-box-button">Copy</button>
				</div>
				<div class="phc-hashtags-box">
					<h3 class="phc-hashtags-box-title">Dog3</h3>
					<p class="phc-hashtags-box-tags">#dog #dogstagram #instadog #dogsofinstagram #worldofdogs #dogslove #cutedog #doggy #igdogs #dogs #pet #dogoftheday #myfriend #doglover #ilovemydog #ilovedog #doglove #doglife #mydog #happydog #3rd</p>
					<button onclick="copyToClipboard('.phc-hashtags-box-tags')" class="phc-hashtags-box-button">Copy</button>
				</div>
			</div>
		</div>
	</body>
</html>

Answer 1

~~不是按类获取该类的所有元素，而是将查找限制为按钮的parent() div，它只会获取相关文本：~~

<击>

$(document).ready(function(){
    $(document).on('click', '.phc-hashtags-box-button', function () {
        $(this).parent().find('.phc-hashtags-box-tags');  // notice the change on this line.
        copy = copy +$(this).text();
    });
});

<击> 修改

工作解决方案：

现在我注意到了 - 你没有将一个元素传递给copyToClipboard。

<button onclick="copyToClipboard('.phc-hashtags-box-tags')" class="phc-hashtags-box-button">Copy</button>

正在发送保存以复制3中的最后一个元素。请尝试改为：

<button onclick="copyToClipboard($(this).parent())" class="phc-hashtags-box-button">Copy</button>

Answer 2

我相信当你通过＆＃39; .phc-hashtags-box-tags＆＃39;对于按钮元素的onclick attr，它将所有元素与该类匹配，并返回函数值的最后一个匹配。

~~相反，请尝试将按钮onclick处理程序更改为：~~

~~copyToClipboard（$ this）~~

也就是说，execCommand函数在提供的代码片段中不起作用，因此验证很困难。

也许尝试传递ID或尝试构建更优雅的解决方案。随着复杂性的增加，许多相对jQuery选择器将不可避免地导致错误。

只选择带有类名的兄弟div中的文本，它具有许多相同类名的族

2 个答案: