Блог

Главная - Вопросы по программированию - Swiper.js : не удается получить значение текстовой области в режиме цикла

Swiper.js : не удается получить значение текстовой области в режиме цикла

#javascript #html #swiper #swiperjs #swiper.js

#javascript #HTML #swiper.js

Вопрос:

Я не могу получить значение текстовой области в циклическом swiper Swiper.js .

Вот что я сделал.

  1. Я определил swiper с одним слайдом и поместил в него текстовую область. (id =»aaa», одна и единственная текстовая область)
  2. Я определил функцию «GetValue ()», которая показывает значение текстовой области. (используя getElementById(), console.log())

    функция GetValue(id){ var element = document.getElementById(id); var value = element.value; console.log(значение); }

  3. Я включил режим цикла для swiper.

    // Swiper Настройка var swiper = new Swiper(‘.swiper-container’, { allowTouchMove: false, цикл: 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>

Как я могу получить значение текстовой области в циклическом swiper? Пожалуйста, дайте мне знать, если у вас есть какие-либо решения для этого.

Заранее благодарю вас.

Ответ №1:

Проблема здесь в том, что идентификаторы не могут быть продублированы в одном документе, а этот элемент управления дублирует шаблон слайда и его содержимое, поэтому «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, а затем получаем первый объект текстовой области, который содержит. Вот и все!

Посмотрите на предлагаемое решение в JSFiddle: https://jsfiddle.net/s0Lw2yeg/1 /

Я надеюсь, что это будет полезно.

Комментарии:

1. Привет, Карлес. Я действительно ценю ваш ответ. Я не знал, что текстовая область объявлялась несколько раз. Теперь я понимаю, в чем проблема. Спасибо за вашу помощь. Надеюсь, у вас отличный день 🙂

Метки: