将内容附加到DIV，这取决于数据属性

Question

在单击具有相同属性的链接时，试图将具有特定数据属性的HTML元素分离，然后将其连接到另一个Div。获得了检测到哪些元素的代码，但无法找到工作解决方案。

将很高兴获得任何帮助。预先感谢您。

        $(document).ready(function() {
            $(".modal-trigger").click(function() {
                var modalContent = $(this);
                var $modalContent = $('.modal-inner').detach();
                $('.modal').append($modalContent).fadeIn();
            });
            $('.modal-trigger').on('click', function () {
                var modalContent = $(this);
                console.log(modalContent.data('content'));
                $('')
            });
 
        });

.modal {
    width: 100px;
    height: 50px;
    background: #999;
    display: none;
    color: #fff;
    padding: 15px;
    text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="div">
        <p class="modal-inner" data-content="modal-1">Content 1</p>
        <p class="modal-inner" data-content="modal-2">Content 2</p>
        <p class="modal-inner" data-content="modal-3">Content 3</p>
    </div>
    <a class="modal-trigger" data-content="modal-1" href="#">Trigger 1</a>
    <a class="modal-trigger" data-content="modal-2" href="#">Trigger 2</a>
    <a class="modal-trigger" data-content="modal-3" href="#">Trigger 3</a>
    <div class="modal"></div>

Answer 1

好吧，让我们看看我是否了解您的问题。

请参阅此处的代码：

    $(document).ready(function() {
        $('.modal-trigger').on('click', function () {
$(".modal-inner").show();
            var modalContent = $(this);
            var modalSelector = modalContent.data('content');
            var content = $('.modal-inner[data-content="' + modalSelector +'"]');
            var contentToAdd = content.clone();
            $(".modal-inner").hide();
            $('.modal').append(contentToAdd).fadeIn();
        });
    });

在此行动：https：//jsfiddle.net/o2gxgz9r/41855/

目前尚不清楚您是否要替换内容或仅将内容添加到现有内容中。但是也许现在对您来说很清楚如何获得DIV并将其连接到另一个Div。这应该可以帮助您找到解决方案。