Question

我正在编写代码，以便使用剪贴板.js复制单击时的文本，并且复制效果很好。我正在根据剪贴板.js文档使用HTML5数据剪贴板文本的数据属性。

我打算花几秒钟的时间显示一条消息：“您复制了文本”，并且该元素是clicked元素的第二级父级的子元素，但是我无法找到如何访问clicked元素-> parent ->父母->孩子->孩子

我已经尝试过各种JQuery代码，例如$(this).closest('.col-md-3').find('.copied-msg');或$(e.target).closest('.col-md-3').find('.copied-msg');或$（e）.closest（'。col-md-3'）。find（'。copied-msg'） ;`也尝试了许多方法并进行了搜索，但找不到方法。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="row" id="color-list">
            <div class="col-md-3 text-center mb-5">
                <div style="margin-bottom: 20%;">
                    <a class="copied-msg" style="display: none;"> <img src="assets/red-heart.svg" class="copy-msg-icon"> Yo! Copied </a>
                </div>
                <div class="card front justify-content-center text-center">
                    <a class="copy-msg-front clipboard" data-clipboard-text="linear-gradient(165.13deg, #FEFFA3 16.78%, #FFEA37 83.64%)">
                          Click to copy
                          <img class="copy-msg-icon" src="assets/sign-of-the-horns-apple.svg">
                        </a>
                </div>
                <div class="card text-center" style="background: linear-gradient(171.31deg, #FFF056 9.45%, #FDA47A 85.15%); z-index: 3;">
                    <a class="copy-msg clipboard" data-clipboard-text="linear-gradient(165.13deg, #FEFFA3 16.78%, #FFEA37 83.64%)">
                          Click to copy
                          <img class="copy-msg-icon" src="assets/sign-of-the-horns-apple.svg">
                        </a>
                </div>
                <div class="card" style="background: linear-gradient(165.13deg, #FEFFA3 16.78%, #FFEA37 83.64%); z-index: 2;">
                    <a class="copy-msg clipboard" data-clipboard-text="linear-gradient(165.13deg, #FEFFA3 16.78%, #FFEA37 83.64%)">
                          Click to copy
                          <img class="copy-msg-icon" src="assets/sign-of-the-horns-apple.svg">
                        </a>
                </div>
                <div class="card" style="background: linear-gradient(167.21deg, #5BE6FF 12.41%, #33ADFF 71.3%); z-index: 1;">
                    <a class="copy-msg clipboard" data-clipboard-text="linear-gradient(165.13deg, #FEFFA3 16.78%, #FFEA37 83.64%)">
                          Click to copy
                          <img class="copy-msg-icon" src="assets/sign-of-the-horns-apple.svg">
                        </a>
                </div>
                <div class="text-left m-2 ">
                    #1 theseekr
                </div>
            </div>
        </div>
    </div>

    <!-- Clipboard.js -->
    <script type="text/javascript" src="js/clipboard.min.js"></script>


    <script>
        var clipboard = new Clipboard('.clipboard');

        $(document).ready(function() {
            clipboard.on('success', function(e) {

                var p = $(this).closest('.col-md-3').find('.copied-msg');
                p.style.display = 'none';
                console.log(p);
                // setTimeout(function() {
                //     $(e.trigger).text("Copy");
                // }, 2500);
            });

            clipboard.on('error', function(e) {
                console.log("Your browser doesn't support")
            });
        });
    </script>
</body>

</html>

如代码中所示，我有一个容器，其中有一行，而现在只有一列是col-md-3，但将超过30列，

每个col-md-3具有6 div，当用户单击具有（.clipboard）类的2,3,4,5 div时，第一个div需要显示并隐藏。

Answer 1

$('a.copy-msg').on('click', function() {
  $(this).closest('.col-md-3').children().first().hide();
});

Answer 2

它为我工作。除非我不太确定为什么您要在元素已经被隐藏时尝试隐藏它：

p.style.display = 'none';

请参见小提琴https://jsfiddle.net/0y8qfs2x/1/

我使用了show().fadeOut(500) //change to what ever time suits you和e.trigger。

如何隐藏被单击元素的祖父母的第一个子元素？

2 个答案: