0

我无法在 Swiper.js 的循环 swiper 中获取 textarea 的值。

这就是我所做的。

  1. 我用一张幻灯片定义了一个滑动器，并在其中放置了一个文本区域。(id="aaa", 一个且唯一的文本区域)

  2. 我定义了一个函数“getValue()”来显示文本区域的值。（使用 getElementById()、console.log()）

    函数 getValue(id){ var element = document.getElementById(id); 变量值 = 元素值；控制台.log（值）；}

  3. 我启用了刷卡器的循环模式。

    // Swiper 设置 var swiper = new Swiper('.swiper-container', { allowTouchMove: false, loop: true,

  4. 我用一个按钮执行了这个函数，它返回“”（空字符串）

  5. 这是我的实验结果

  • 当循环被禁用时，该函数在文本区域中返回正确的文本。
  • 当 swiper 有多张幻灯片时，该函数仅对最后一张幻灯片中的文本区域返回 ""。

这是复制问题的完整代码。 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>

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

先感谢您。

4

1 回答 1

0

这里的问题是 Id 不能在同一个文档中重复，并且该控件复制了模板幻灯片及其内容，因此“aaa”被声明了多次。一种解决方案可能是这个：

修改幻灯片模板如下：

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

在这里，getValue() 是使用 Caller 对象（Button）作为参数调用的。

现在，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/

我希望这会有用。

于 2020-11-30T14:10:39.810 回答