Question

我正在使用Clipboard.js插件一个网站，并坚持只选择点击.copy按钮的父类的问题。

问题是我想要使用富文本格式复制pre标记内的代码，而我正在使用的方法做得很好（return document.querySelector("myClass")），但是当我更改前面的代码时与我在类似问题中找到的那个（return $(trigger).closest(".fw-code-copy").next("code").text();）我可以复制每个块的代码但是丢失了格式，我的意思是代码被复制为纯文本。

请您查看我的代码，并建议如何找到按钮的父级？

HTML

<div class="code-snippet">
    <pre class="code">
     &lt;div&gt;
        some code
     &lt;/div&gt;
    </pre>
    <input class="copy" type="button" value="copy">
</div>

<div class="code-snippet">
    <pre class="code">
     &lt;div&gt;
        some other code
     &lt;/div&gt;
    </pre>
    <input class="copy" type="button" value="copy">
</div>

CSS

.code-snippet{
    position: relative;
    width: 100%;
    bordeR: 1px solid red;
    margin-bottom: 20px;
}
.copy{
    position: absolute;
    right: 20px;
    bottom: 20px;
}

JS

$(document).ready(function(){
    var clipboard = new Clipboard('.copy', {
        target: function() {
            return document.querySelector('.code');
        }
    });
});

Answer 1

您可以使用jQuery .closest()通过选择器从祖先获取第一个元素：

JSFiddle

$(document).ready(function(){
    var clipboard = new Clipboard('.copy', {
        target: function(trigger) {
            return $(trigger).closest('.code-snippet').find('.code').get(0);
        }
    });
});

.code-snippet {
    position: relative;
    width: 100%;
    border: 1px solid red;
    margin-bottom: 20px;
}

.copy {
    position: absolute;
    right: 20px;
    bottom: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.5/clipboard.min.js"></script>

<div class="code-snippet">
    <pre class="code">
     &lt;div&gt;
        some code
     &lt;/div&gt;
    </pre>
    <input class="copy" type="button" value="copy">
</div>

<div class="code-snippet">
    <pre class="code">
     &lt;div&gt;
        some other code
     &lt;/div&gt;
    </pre>
    <input class="copy" type="button" value="copy">
</div>

Answer 2

我认为这应该有效。你甚至不需要在目标函数中使用jQuery：

char *day(int n) {
static char *name[] = {
"error", "monday", "tuesday", "wednesday",
"thursday", "friday","saturday", "sunday"
};

段：

$(document).ready(function(){
    var clipboard = new Clipboard('.copy', {
        target: function(trigger) {
            return trigger.previousElementSibling;
        }
    });
});

$(document).ready(function() {
  var clipboard = new Clipboard('.copy', {
    target: function(trigger) {
      return trigger.previousElementSibling;
    }
  });
});

.code-snippet {
  position: relative;
  width: 100%;
  bordeR: 1px solid red;
  margin-bottom: 20px;
}
.copy {
  position: absolute;
  right: 20px;
  bottom: 20px;
}
.code {
  color: purple;
}

触发clipboard.js父

2 个答案: