Swiper.js: 无法在循环模式下获取文本区域值

Question

我无法在 Swiper.js 的循环滑动器中获取文本区域的值。

这是我所做的。

我定义了一个带有单张幻灯片的滑动器，并在其中放置了一个文本区域。（id="aaa"，一个且唯一的文本区域）
我定义了一个显示文本区域值的函数“getValue()”。（使用 getElementById()，console.log()）

函数getValue(id){ var 元素 = document.getElementById(id); 变量值 = element.value; console.log（值）； }
我开启了滑动条的循环模式

// 滑动设置 var swiper = new Swiper('.swiper-container', { 允许触摸移动：假，循环：真，
我用一个按钮执行了函数，它returns“”（空字符串）
这是我的实验结果

当循环被禁用时，函数 returns 文本区域中的正确文本。
当滑动条有多张幻灯片时，函数returns "" 仅适用于最后一张幻灯片中的textareas。

这是复制问题的完整代码。 https://jsfiddle.net/mjn7d385/

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

<head>
    <meta charset="utf-8">
    <title>test</title>

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

    <!-- Demo styles -->
    <style>
        html,
        body {
            position: relative;
            height: 100%;
        }

        body {
            background: #eee;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper-container {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .swiper-pagination-bullet {
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
            color: #000;
            opacity: 1;
            background: rgba(0, 0, 0, 0.2);
        }

        .swiper-pagination-bullet-active {
            color: #fff;
            background: #007aff;
        }
    </style>

</head>

<body>
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" id="page1">
                <textarea name="aaa" id="aaa" cols="40" rows="5"></textarea>
                <button onclick="getValue('aaa');">Check Values</button>
            </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>

    <!-- Swiper JS -->
    <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

    <script>
        // Swiper Setting
        var swiper = new Swiper('.swiper-container', {
            allowTouchMove: false,
            loop: true,
            pagination: {
                el: '.swiper-pagination',
                renderBullet: function (index, className) {
                    return '<span class="' + className + '">' + (index + 1) + '</span>';
                },
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });

        function getValue(id){
            var element = document.getElementById(id);
            var value = element.value;
            console.log(value);
        }
        
    </script>

</body>

</html>

如何获取循环滑动器中文本区域的值？如果您对此有任何解决方案，请告诉我。

提前谢谢你。

Answer 1

这里的问题是Id不能在同一个文档中重复，而这个控件复制了Template Slide及其内容，所以多次声明了“aaa”。一种解决方案可能是这个：

修改幻灯片模板为：

<div class="swiper-slide" id="page1">
    <textarea cols="40" rows="5"></textarea>
    <button onclick="getValue(this);">Check Values</button>
</div>

此处，getValue() 是使用调用者对象（按钮）作为参数调用的。

现在getValue函数修改为：

function getValue(obj){
    var element = obj.parentElement.getElementsByTagName("textarea")[0];
    var value = element.value;
    console.log(value);
}

在这个函数中，我们定位到按钮的父对象，也就是DIV，然后我们得到第一个包含的textarea对象。就是这样！

查看 JSFiddle 中建议的解决方案： https://jsfiddle.net/s0Lw2yeg/1/

希望对您有所帮助。

Swiper.js: 无法在循环模式下获取文本区域值

Swiper.js: cannot get textarea value in loop mode

javascript

html

swiper

swiperjs

swiper.js