选择图像 - 比复制所选图像"href"元素

Question

我的页面以下一个格式加载了很多图像：

<a class="something" href="1.html">
     <div class="something">
        <img alt="name" src="https://www.homepage.com/.1.jpg"/>
     </div>
</a>

如何使用jQuery选择我想要的图像，然后单击"复制"按钮后，强制它将所有选定图像中的href属性一起复制到剪贴板，或以格式复制到输入框中：

http://www.homepage.com/1.html
http://www.homepage.com/7.html
http://www.homepage.com/15.html
http://www.homepage.com/21.html

取决于我选择的图像。

谢谢，对不起英语不好。

Answer 1

我要采取的方法是在用户单击每个选定图像时向每个选定图像添加一个"选定"类。从那里，当用户单击您的"复制"按钮时，您可以在页面上查询 $('.selected'(。

值得指出的是，目前，将内容复制到用户剪贴板的解决方案很少且有限。经典的解决方案一直使用动态生成的Flash电影剪辑，但该解决方案非常笨重，不适用于任何没有闪存的设备(如所有iPhone，iPad，大多数"智能"电视和类似硬件等(。有一些新的替代方案，如(https://clipboardjs.com(，但它们的浏览器支持相对有限 - 并且仅适用于现代浏览器。

您

最好的解决方案可能是获取您收集的所有 href 属性并将它们写入<div>或<textarea>。

如果你发布到目前为止已经尝试过的javascript/jQuery，你可能会得到更多的帮助和更具体的帮助。

Answer 2

https://jsfiddle.net/o2gxgz9r/6966/

<script language="javascript" type="text/javascript">
$(document).ready(function () {
  
  
});

._myci9 {
    padding: 5px;
}
._22yr2 {
    widht:auto;
    float:left;
    height:auto;
    margin:5px;
}
._22yr2 img {
    width: 110px;
    float:left;
    height:110px;
    
}
._ovg3g {
    clear:both;
}
input[type=text] {
    width: 20em
}
p {
    margin: 1em 0 0;
}

<div class="_myci9">
   <a class="_8mlbc _vbtk2 _t5r8b" href="/p/BRB4zUeBnYk/?taken-by=kingjames">
      <div class="_22yr2">
         <img alt="something" class="_icyx7" id="pImage_32" src="https://instagram.flju2-2.fna.fbcdn.net/t51.2885-15/s640x640/sh0.08/e35/16906087_242760049518775_800349524768849920_n.jpg">
      </div>
   </a>
   <a class="_8mlbc _vbtk2 _t5r8b" href="/p/BQvr-9_BE6S/?taken-by=kingjames">
      <div class="_22yr2">
        <img alt="something" class="_icyx7" id="pImage_33" src="https://instagram.flju2-2.fna.fbcdn.net/t51.2885-15/e35/c143.0.409.409/16789700_731933080314257_4953666797892009984_n.jpg">
         
        
      </div>
   </a>
   <a class="_8mlbc _vbtk2 _t5r8b" href="/p/BQqSt9TBmk2/?taken-by=kingjames">
      <div class="_22yr2">
        <img alt="something" class="_icyx7" id="pImage_34" src="https://instagram.flju2-2.fna.fbcdn.net/t51.2885-15/e35/c0.64.618.618/16789715_173474169818953_8577321114865238016_n.jpg">
        
      </div>
   </a>
    <div class="_ovg3g"></div>
   <a class="_8mlbc _vbtk2 _t5r8b" href="/p/BQogu-ihCIr/?taken-by=kingjames">
      <div class="_22yr2">
        <img alt="something" class="_icyx7" id="pImage_24" src="https://instagram.flju2-2.fna.fbcdn.net/t51.2885-15/s640x640/sh0.08/e35/16789375_683901995123878_4667158291309133824_n.jpg">
        
      </div>
   </a>
   <a class="_8mlbc _vbtk2 _t5r8b" href="/p/BQi3qtjFnR7/?taken-by=kingjames">
      <div class="_22yr2">
        <img alt="something" class="_icyx7" id="pImage_25" src="https://instagram.flju2-2.fna.fbcdn.net/t51.2885-15/s640x640/sh0.08/e35/c0.135.1080.1080/16465687_1404916892863742_734096368578068480_n.jpg">
         
      </div>
   </a>
   <a class="_8mlbc _vbtk2 _t5r8b" href="/p/BQgbFZbFLeM/?taken-by=kingjames">
      <div class="_22yr2">
       <img alt="something" class="_icyx7" id="pImage_26" src="https://instagram.flju2-2.fna.fbcdn.net/t51.2885-15/s640x640/sh0.08/e35/c0.75.851.851/16465085_1795837224074827_2439164261574901760_n.jpg">
       
      </div>
   </a> 
   <div class="_ovg3g"></div>
</div>
<br>
<button  id="copybtn" type="button">Click to copy</button>
<textarea rows="4" cols="50">
place to copy links in
</textarea>

这就是我目前拥有的。我真的希望你能理解我的想法是什么。不要关心css，现在肯定很重要。

谢谢你的时间。

Answer 3

像这样的东西？

小提琴

https://jsfiddle.net/Hastig/kmgzbnmh/

$('a').click(function(event) {
	event.preventDefault();
  var urlToCopy = $(this).attr('href') + '<br>';
  $('.listbox').append(urlToCopy);
})

body {
  position: relative;
  display: flex;
  margin: 0;
}
img {
  display: flex;
  width: 100%;
}
.listbox {
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  height: 100px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="something" href="http://www.faykew3bsite.comm/1.html">
     <div class="something">
        <img alt="name" src="http://i.imgur.com/1T9xqzR.jpg">
     </div>
</a>
<a class="something" href="http://www.faykew3bsite.comm/2.html">
     <div class="something">
        <img alt="name" src="http://i.imgur.com/SyhkvcN.jpg">
     </div>
</a>
<a class="something" href="http://www.faykew3bsite.comm/3.html">
     <div class="something">
        <img alt="name" src="http://i.imgur.com/9Qjz8RE.jpg">
     </div>
</a>
<div class="listbox"></div>