Требуется помощь при переключении слайдов - PullRequest
Новая
       40

Требуется помощь при переключении слайдов

0 голосов
/ 29 марта 2019

У меня возникли некоторые проблемы с получением этой страницы, как мне нужно Я наконец-то добрался до того места, где он будет позволять открывать только 1 из 9 разделов за раз, но я не могу заставить эти разделы открывать и закрывать, используя одну и ту же кнопку запуска. Если бы они могли также иметь некоторый переход, такой как открывание и закрывание, это было бы также здорово. Я просто изучаю jquery и, наконец, могу спросить экспертов.

https://toyotechus.com/expanding-rows/ - это страница, на которой я настроен.

Это код, который я использую. У меня повторяется начальный сценарий для всех 9 разделов и код переключения под ним. 

    <script>

        ( function( $ ) {

            'use strict';

            $( document ).ready( function() {

                var $trigger = $( '.open-vc-row-auto1' );

                var $hiddenRow = $( '.vc-row-auto1' );

                if ( $hiddenRow.length ) {
                    $trigger.click( function() {
                        $hiddenRow.toggle();
                        return false;
                    } );
                }

            } );

        } ( jQuery ) );

    </script>   
    <script>
$(".togglerowlink").on("click", function(e) {
    var target = $(this).attr("href");
    $(target).slideToggle('slow');
    $(".vc-row-auto").not(target).hide();
    e.preventDefault();
});
    </script>

В идеале этот переключатель должен открывать и закрывать раздел, а не просто открывать его. Также я считаю, что он должен скользить открытым и закрытым между изменениями раздела, и это не так.

1 Ответ

0 голосов
/ 29 марта 2019

Похоже, вы написали отдельные блоки скриптов, чтобы открывать и закрывать каждую панель. 9 панелей = 9 скриптовых блоков. Этот код правильно открывает и закрывает строки, но не закрывает все остальные, поэтому вы можете открыть 2 или 3 строки одновременно. Это ПЛОХО, потому что вы повторяете код снова и снова и затрудняете его изменение в будущем.

Но тогда вы сделали отличную вещь !! Вы пытались написать блок SINGLE script, чтобы закрыть любую панель, которая не должна быть открыта. Это правильная идея, и вы должны применить ее к каждой панели.

Сначала проблемы:

  1. Эта строка не работает, потому что у вас нет атрибутов href Ваши элементы HTML: var target = $(this).attr("href"); Итак target === undefined, и это ничего не делает.
  2. Вы слишком конкретны со своими селекторами. Этот var $trigger = $( '.open-vc-row-auto9' ); слишком специфичен для повторного использования для всех элементов. Вот почему вы должны написать это 9 раз. :(

Решения - для этого потребуется небольшой рефакторинг html, но давайте перечислим наши цели.

  1. Написать один кусок кода для управления всеми кнопками. Он должен применять обработчик нажатия ко ВСЕМ кнопкам, и когда кнопка нажата, мы должны знать, на какую конкретную панель эта кнопка пытается нацелиться.
  2. Напишите достаточно общий HTML-код, чтобы можно было достичь цели 1. Мы будем использовать атрибуты data- для идентификации кнопок и соответствующих им панелей. 
<style>
.panel { display: none; }
</style>

<!-- buttons -->
<button class="btn" data-target="panel-1">Show Panel 1</button>
<button class="btn" data-target="panel-2">Show Panel 2</button>
<button class="btn" data-target="panel-3">Show Panel 3</button>

<!-- panels -->
<div class="panel" data-panel="panel-1"><h1>This is panel 1.</h1></div>
<div class="panel" data-panel="panel-2"><h1>This is panel 2.</h1></div>
<div class="panel" data-panel="panel-3"><h1>This is panel 3.</h1></div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(function(){
        // select all buttons
        // get their target
        // if target is open, close it
        // if target is closed, open it, and close all others

        $('.btn').click(function(e){
            e.preventDefault(); 
            var btn = $(e.target);
            var target = btn.attr('data-target'); // panel-1, panel-2, etc.
            var target_panel = $('[data-panel="'+target+'"]'); // css attribute selector
            var targetIsVisible = target_panel.css('display') === 'block'; // display: block; means it's visible ;)

            if (targetIsVisible === true){
                target_panel.slideUp(); // show the one we want
            } else {
                $('.panel').hide(); // hide all panels that may or may not be open
                target_panel.slideDown(); // show the one we want
            }
        });
    });
</script>

JS FIDDLE DEMO

Вам нужно применить концепции к вашему коду, это не идеальное исправление копирования / вставки. Удачи. Ты получил это!

...