时间戳

首页 > 解决方案 > 将一个 div 的值加载到另一个

html - 将一个 div 的值加载到另一个

问题描述

在下面的代码中，我有三个按钮 - P1、P2 和 P3，每个按钮下面都有一个卡片 div。在右侧，我有另一个 div，其文本为“应在此处显示文本”。我希望当我单击按钮时，其各自的数据应该替换上面的文本。例如，如果我单击 P2，右侧框中的文本应更改为“P2 的数据”

<body>
    <div class="row container">
        <div class="col-lg-6">
            <button data-val="p1">P1</button>
            
            <button data-val="p2">P2</button>
            
            <button data-val="p3">P3</button>
            
        </div>
        <div class="col-lg-6">
            <div class="second">
                <div class="card">
                    <div class="card-body">
                        <span>
                           TEXT SHOULD BE DISPLAYED HERE
                        </span>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="row container">
        <div class="card" data-val="p1">
            <div class="card-body">
                <span>
                    Data for P1
                </span>
            </div>
        </div>
        <div class="card"  data-val="p2">
            <div class="card-body">
                <span>
                    Data for P2
                </span>
            </div>
        </div>
        
        <div class="card"  data-val="p3">
            <div class="card-body">
                <span>
                    Data for P3
                </span>
            </div>
        </div>
    </div>
</body>

如何使用 jQuery 实现这一点？请注意，我不仅要替换文本，还要替换真实场景中的整个 div。

提前致谢 ！

标签： htmljquery

解决方案

您可以在每个按钮上侦听单击事件。单击时，您可以获得与按钮关联的文本值并将其复制到卡片：

$('.row .col-lg-6 button').on('click', function(e) {
    var dVal = this.dataset.val;
    var cardEle = $(this).closest('.row.container').next().find('.card').filter(function(idx, ele) {
        return ele.dataset.val == dVal;
    });
    var txt = cardEle.text().trim();
    $(this).closest('.row').find('.col-lg-6 .second .card-body span').text(txt);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="row container">
    <div class="col-lg-6">
        <button data-val="p1">P1</button>

        <button data-val="p2">P2</button>

        <button data-val="p3">P3</button>

    </div>
    <div class="col-lg-6">
        <div class="second">
            <div class="card">
                <div class="card-body">
                        <span>
                           TEXT SHOULD BE DISPLAYED HERE
                        </span>
                </div>
            </div>
        </div>
    </div>

</div>

<div class="row container">
    <div class="card" data-val="p1">
        <div class="card-body">
                <span>
                    Data for P1
                </span>
        </div>
    </div>
    <div class="card"  data-val="p2">
        <div class="card-body">
                <span>
                    Data for P2
                </span>
        </div>
    </div>

    <div class="card"  data-val="p3">
        <div class="card-body">
                <span>
                    Data for P3
                </span>
        </div>
    </div>
</div>

推荐阅读