Belial提出的问题

Belial

Asked: 2020-04-06 21:53:36 +0800 CST

单击箭头后，自动播放在光滑的滑块中停止工作

0

在 slick slider 中，单击箭头转到上一张或下一张幻灯片后，自动播放停止工作，但单击页面的任何区域后，自动播放再次开始工作，但必须在单击箭头后，自动播放更进一步。我该如何解决？

JS：

jQuery(document).ready(function ($) {

    var $slider = $('.slider');
    if ($slider.length) {
        $slider.slick({
            slidesToShow: 7,
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 1500,
            responsive: [
                {
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 3,
                        slidesToScroll: 3,
                        infinite: true,
                        autoplay: true,
                        autoplaySpeed: 1500
                    }
                },
                {
                    breakpoint: 600,
                    settings: {
                        autoplay: true,
                        autoplaySpeed: 1500,
                        slidesToShow: 2,
                        slidesToScroll: 2
                    }
                },
                {
                    breakpoint: 480,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1,
                        autoplay: true,
                        autoplaySpeed: 1500
                    }
                }
            ]
        });
    }
});

Belial

Asked: 2020-01-06 21:54:58 +0800 CST

注意：未定义索引：。PHP，通过 $_GET

1

我有一个正在处理的表单，用户输入的数据显示在页面上。还有一个检查，如果该字段为空，则不显示，但由于某种原因，如果某些字段（不是全部）为空，则会报错：Notice: Undefined index: hobbies in C:\ xampp\htdocs\index.php 第 25 行。并且并非在所有空字段中都给出此错误。

表格代码：

<body>
    <div class="wrapper">
    <h1>Урок "Формы": теги и их атрибуты.</h1>
    <h2>Расскажите немного о себе...</h2>
    <p id="instruction">Попробуйте создать аналогичную форму. Для целей демонстрации вполне подойдут и вымышленные</p>

        <form action="index.php" method="GET">
            <ul class="fieldsets">
                <li>
                    <fieldset>
                        <legend>Коротко о себе</legend>
                        <ul class="info">
                            <li class="short-info-element">
                                <label for="name">Имя:</label>
                                <input type="text" id="name" name="first-name"/>
                            </li>

                            <li class="short-info-element">
                                <label for="second-name">Фамилия:</label>
                                <input type="text" id="second-name" name="last-name"/>
                            </li>

                            <li class="short-info-element">
                                <span>Пол:</span>
                                <input type="radio" id="male" name="sex" value="male">
                                <label for="male">Мужской</label>
                                <input type="radio" id="female" name="sex" value="female">
                                <label for="female">Женский</label>
                            </li>

                            <li class="short-info-element">
                                <label for="age">Возраст:</label>
                                <input type="text" id="age" name="age">лет
                            </li>
                        </ul>
                    </fieldset>
                </li>

                <li>
                    <fieldset>
                        <legend>Подробнее о себе</legend>
                        <p>
                            <input type="radio" id="sex-male" name="sex-detailed" value="male">
                            <label for="sex-male">Молодой человек</label>
                        </p>
                        <p>
                            <input type="radio" id="sex-female" name="sex-detailed" value="female">
                            <label for="sex-female">Девушка</label>
                        </p>
                        <ul class="info">
                            <li>
                                <input type="date" id="birth" class="personal-info" name="birthday"/>
                                <label for="birth">Дата рождения</label>
                            </li>

                            <li>
                                <input type="text" id="family-status" class="personal-info" name="martial-status"/>
                                <label for="family-status">Семейное положение</label>
                            </li>

                            <li>
                                <input type="text" id="social-status" class="personal-info" name="social-status"/>
                                <label for="social-status">Социальный статус</label>
                            </li>

                            <li>
                                <input type="text" id="place-of-living" class="personal-info" name="live-place"/>
                                <label for="place-of-living">Местожительства</label>
                            </li>
                        </ul>

                        <p class="bold-text">Что вы обычно делаете на выходных:</p>
                        <ul class="info">
                            <li>
                                <input type="checkbox" id="sleep" name="hobbies[]" value="Sleep"/>
                                <label for="sleep">Сплю</label>
                            </li>

                            <li>
                                <input type="checkbox" id="friends" name="hobbies[]" value="Friends"/>
                                <label for="friends">Гуляю с друзьями</label>
                            </li>

                            <li>
                                <input type="checkbox" id="fishing" name="hobbies[]" value="Fishing"/>
                                <label for="fishing">Хожу на рыбалку</label>
                            </li>

                            <li>
                                <input type="checkbox" id="games" name="hobbies[]" value="Games"/>
                                <label for="games">Играю в игры</label>
                            </li>
                        </ul>
                        <p class="bold-text">Рассказать о формах в книге, посвященной HTML:</p>
                        <p>
                            <select id="books" name="books">
                                <option value="Book 1">Book 1</option>
                                <option value="Book 2">Book 2</option>
                                <option value="Book 3">Book 3</option>
                                <option value="Book 4">Book 4</option>
                                <option value="Book 5">Book 5</option>
                            </select>
                        </p>
                        <p class="bold-text">Сколько книг вы прочитали за свою жизнь:</p>
                        <ul class="info">
                            <li>
                                <input type="radio" id="first-option" name="quantity-of-books" value="0-10"/>
                                <label for="first-option">0-10</label>
                            </li>

                            <li>
                                <input type="radio" id="second-option" name="quantity-of-books" value="11-20"/>
                                <label for="second-option">11-20</label>
                            </li>

                            <li>
                                <input type="radio" id="third-option" name="quantity-of-books" value="21-50"/>
                                <label for="third-option">21-50</label>
                            </li>

                            <li>
                                <input type="radio" id="fourth-option" name="quantity-of-books" value="50+"/>
                                <label for="fourth-option">50+</label>
                            </li>
                        </ul>
                        <span class="no-bottom-padding">Ваши комментарии:</span>
                        <p>
                            <textarea id="comments" name="comments" rows="10" cols="50"></textarea>
                        </p>
                        <p>
                            <select id="positions" name="positions[]" multiple>
                                <option value="First Position">Первая позиция</option>
                                <option value="Second Position">Вторая позиция</option>
                                <option value="Third Position">Третья позиция</option>
                                <option value="Fourth Position">Четвёртая позиция</option>
                            </select>
                        </p>
                    </fieldset>
                </li>

                <li>
                    <fieldset>
                        <legend>И в заключении</legend>
                        <p>
                            <input type="text" id="placeholder-example" placeholder="Это поле было введено до вас"
                                   disabled>
                        </p>
                        <span class="no-bottom-padding">Email:</span>
                        <p>
                            <input type="email" id="email" name="email">
                        </p>

                        <span class="no-bottom-padding">Хотите подписатья на самую модную рассылку спама?</span>
                        <p class="choose-categories">Выберите категории</p>

                        <ul class="info">
                            <li>
                                <input type="checkbox" id="equipment" name="categories[]" value="Equipments"/>
                                <label for="equipment">Оборудование</label>
                            </li>

                            <li>
                                <input type="checkbox" id="dinners" name="categories[]" value="How To Cook Dinners"/>
                                <label for="dinners">Как приготовить обеды</label>
                            </li>

                            <li>
                                <input type="checkbox" id="millions" name="categories[]" value="Million on 2 days"/>
                                <label for="millions">Заработай миллион за два дня!</label>
                            </li>
                        </ul>

                        <p class="bold-text">На сколько сложная задача:</p>
                        <ul class="info">
                            <li>
                                <input type="radio" id="easy" name="how-hard" value="Easy"/>
                                <label for="easy">Совсем нет</label>
                            </li>

                            <li>
                                <input type="radio" id="so-so" name="how-hard" value="So-so"/>
                                <label for="so-so">Так себе</label>
                            </li>

                            <li>
                                <input type="radio" id="hard" name="how-hard" value="Hard"/>
                                <label for="hard">Еле справились</label>
                            </li>
                        </ul>
                    </fieldset>
                </li>
                <div>
                    <button type="submit" name="submit">Отправить</button>
                </div>
            </ul>
        </form>
    </div>

</body>

表单处理代码：

<body>

<dl>
    <?php
    $first_name = $_GET["first-name"];
    $last_name = $_GET["last-name"];
    $sex = $_GET["sex"];
    $age = $_GET["age"];
    $sex_detailed = $_GET["sex-detailed"];
    $birthday = $_GET["birthday"];
    $martial_status = $_GET["martial-status"];
    $social_status = $_GET["social-status"];
    $live_place = $_GET["live-place"];
    $hobbies = $_GET["hobbies"];
    $books = $_GET["books"];
    $quantity_of_books = $_GET["quantity-of-books"];
    $comments = $_GET["comments"];
    $positions = $_GET["positions"];
    $email = $_GET["email"];
    $categories = $_GET["categories"];
    $how_hard = $_GET["how-hard"];

     function getTextData ($variable, $label) {
        if (!empty($variable)) {
            echo '<div class="row no-gutters">';
            echo '<dt>' . $label  . '</dt>';
            echo '<dd>' . $variable . '</dd>';
            echo '</div>';
        }
    }

    getTextData($first_name, "Имя:");
    getTextData($last_name, "Фамилия:");

        if (!empty($sex) && $sex == 'male') {
            echo '<div class="row no-gutters">';
            echo '<dt>' . "Пол:" . '</dt>';
            echo '<dd>' . "Мужской" . '</dd>';
            echo '</div>';
        }

        if (!empty($sex) && $sex == 'female') {
            echo '<div class="row no-gutters">';
            echo '<dt>' . "Пол:" . '</dt>';
            echo '<dd>' . "Женский" . '</dd>';
            echo '</div>';
        }

    getTextData($age, "Ваш возраст: ");

            if (!empty($sex_detailed) && $sex_detailed == 'male') {
                echo '<div class="row no-gutters">';
                echo '<dt>' . "Вы:" . '</dt>';
                echo '<dd>' . "Молодой человек" . '</dd>';
                echo '</div>';
            }

            if (!empty($sex_detailed) && $sex_detailed == 'female') {
                echo '<div class="row no-gutters">';
                echo '<dt>' . "Вы:" . '</dt>';
                echo '<dd>' . "Девушка" . '</dd>';
                echo '</div>';
            }

    getTextData($birthday, "Дата рождения:");
    getTextData($martial_status, "Семейное положение:");
    getTextData($social_status, "Социальный статус:");
    getTextData($live_place, "Местожительства:");

    if (!empty($hobbies)) {
        echo '<div class="row no-gutters">';
        echo '<dt>' . "Ваши хобби:" . '</dt>';
        foreach ($hobbies as $hobby) {
            echo '<dd>' . $hobby . ',' . '</dd>';
        }
        echo '</div>';
    }

    getTextData($books, "Книга: ");
    getTextData($quantity_of_books, "Прочитано книг за свою жизнь:");
    getTextData($comments, "Ваши комментарии:");

    if (!empty($positions)) {
        echo '<div class="row no-gutters">';
        echo '<dt>' . "Позиции:" . '</dt>';
        foreach ($positions as $position) {
            echo '<dd>' . $position . ',' . '</dd>';
        }
        echo '</div>';
    }

    getTextData($email, "Email:");

    if (!empty($categories)) {
        echo '<div class="row no-gutters">';
        echo '<dt>' . "Подписки:" . '</dt>';
        foreach ($categories as $category) {
            echo '<dd>' . $category . ',' . '</dd>';
        }
        echo '</div>';
    }

    getTextData($how_hard, "Насколько сложная задача:");

    ?>
</dl>
</body>

以下是提交空白表单时的错误：

注意：未定义的索引：第 18 行 C:\xampp\htdocs\index.php 中的性

注意：未定义的索引：第 20 行 C:\xampp\htdocs\index.php 中的性详细信息

注意：未定义索引：第 25 行 C:\xampp\htdocs\index.php 中的爱好

注意：未定义的索引：第 27 行 C:\xampp\htdocs\index.php 中的书籍数量

注意：未定义的索引：第 29 行 C:\xampp\htdocs\index.php 中的位置

注意：未定义索引：第 31 行 C:\xampp\htdocs\index.php 中的类别

注意：未定义的索引：第 32 行 C:\xampp\htdocs\index.php 中的难易程度

但是如果你填写了与这些变量相关的字段，那么这些错误就不存在了。问题是什么？谢谢你。

Belial

Asked: 2020-12-31 14:57:00 +0800 CST

如何在悬停时用图像替换 div？

1

我希望将div鼠标悬停在块上时将其替换为图像。当光标从 div 中移除时，它会返回。我有一些工作，但工作有点不对劲。

$('.features-list li #feature-top-dev').hover(
  function() {
    $('.top-wrapper').addClass('d-none');
    $('.feature-top').css({
      'padding': '0',
      'background-color': '#f5f5f5'
    });
    $('.hover-content').fadeIn('slow');
  },
  function() {
    $('.top-wrapper').removeClass('d-none');
    $('.feature-top').css({
      'padding': '20px 0',
      'background-color': '#ffea00'
    });
    $('.hover-content').fadeOut('slow');
  }
);

$('.features-list li #feature-top-design').hover(
  function() {
    $('.top-wrapper').addClass('d-none');
    $('.feature-top').css({
      'padding': '0',
      'background-color': '#f5f5f5'
    });
    $('.hover-content').fadeIn('slow');
  },
  function() {
    $('.top-wrapper').removeClass('d-none');
    $('.feature-top').css({
      'padding': '20px 0',
      'background-color': '#ffea00'
    });
    $('.hover-content').fadeOut('slow');
  }
);

$('.features-list li #feature-top-graph-des').hover(
  function() {
    $('.top-wrapper').addClass('d-none');
    $('.feature-top').css({
      'padding': '0',
      'background-color': '#f5f5f5'
    });
    $('.hover-content').fadeIn('slow');
  },
  function() {
    $('.top-wrapper').removeClass('d-none');
    $('.feature-top').css({
      'padding': '20px 0',
      'background-color': '#ffea00'
    });
    $('.hover-content').fadeOut('slow');
  }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="row features-list justify-content-center justify-content-md-between justify-content-lg-center">
  <li class="col-xl-3">
    <img src="images/features-card-img.png" alt="Bottle">
    <div class="d-flex flex-column bottle-text-wrapper arrow-up text-left mx-auto">
      <h3 class="features-item-header bottle-header">Redesigning With Personality</h3>
      <span class="bottle-small-text ml-auto">in <span class="yellow-text">web design</span></span>
    </div>
  </li>
  <li class="col-10 col-sm-6 col-md-5 col-lg-4 col-xl-3 feature-item">
    <div class="feature-top" id="feature-top-dev">
      <div class="top-wrapper">
        <i class="fa fa-desktop" aria-hidden="true"></i>
        <h3 class="features-item-header">Web Development</h3>
      </div>
      <div class="hover-content">
        <img src="images/features-card-img.png" alt="Bottle">
      </div>
    </div>
    <div class="feature-bottom mx-auto">
      <p class="features-text">Lorem ipsum dolor sit amet, consectetur.
      </p>
    </div>
  </li>
  <li class="col-10 col-sm-6 col-md-5 col-lg-4 col-xl-3 feature-item">
    <div class="feature-top" id="feature-top-design">
      <div class="top-wrapper">
        <i class="fa fa-th" aria-hidden="true"></i>
        <h3 class="features-item-header">Web Design</h3>
      </div>
      <div class="hover-content">
        <img src="images/features-card-img.png" alt="Bottle">
      </div>
    </div>
    <div class="feature-bottom mx-auto">
      <p class="features-text">Lorem ipsum dolor sit amet, consectetur.
      </p>
    </div>
  </li>
  <li class="col-10 col-sm-6 col-md-5 col-lg-4 col-xl-3 feature-item">
    <div class="feature-top" id="feature-top-graph-des">
      <div class="top-wrapper">
        <i class="fa fa-pencil" aria-hidden="true"></i>
        <h3 class="features-item-header">Graphic Design</h3>
      </div>
      <div class="hover-content">
        <img src="images/features-card-img.png" alt="Bottle">
      </div>
    </div>
    <div class="feature-bottom mx-auto">
      <p class="features-text">Lorem ipsum dolor sit amet, consectetur.
      </p>
    </div>
  </li>
</ul>

它看起来像什么：

将鼠标悬停在具有黄色背景的块之一（Web-Dev、Web-Design、Graphic Design）上时，我需要将其更改为图像。目前，当您将鼠标悬停在这些块中的任何一个上时，图片会同时出现在所有 3 个块中，但我需要，例如，当您将鼠标悬停在 Web-Dev 块上时，图片只出现在其中，而不出现在其他的，其余的块也一样。

Belial

Asked: 2020-12-15 21:37:53 +0800 CST

滑块中的第二张图片适合第一张图片的可见区域

0

我在jquery中制作了我的滑块，但是在加载或刷新页面后，由于某种原因，滑块中的第二张图片适合第一张图片的可见区域，但是在单击滑块箭头后转到第二张图片，并且然后单击后退箭头转到第一张图片看起来应该。

这是加载或刷新页面时的外观（您可以看到第二张图片的一部分）：

这是点击右箭头后的样子，然后点击后退箭头返回第一张图片（看起来应该是这样，但由于某种原因在页面加载时它没有显示）：

需要修复什么，以便在加载页面后看不到第二张图像的一部分？

HTML（引导程序 4）：

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Slider</title>
    <script src="https://use.fontawesome.com/32b3e97fa6.js"></script>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
          integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">
    <div class="row justify-content-center">
        <h1 class="col-12 text-center header">Slider</h1>
        <div class="list-border">
            <ul class="row images-list">
                <li class="images-item">
                    <img src="images/image_1.png" alt="First image">
                    <a class="next" href="#"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
                </li>
                <li class="images-item">
                    <img src="images/image_2.png" alt="Second image">
                    <a class="previous" href="#"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
                    <a class="next" href="#"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
                </li>
                <li class="images-item">
                    <img src="images/image_3.png" alt="Third image">
                    <a class="previous" href="#"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
                    <a class="next" href="#"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
                </li>
                <li class="images-item">
                    <img src="images/image_4.png" alt="Fourth image">
                    <a class="previous" href="#"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
                    <a class="next" href="#"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
                </li>
                <li class="images-item">
                    <img src="images/image_5.png" alt="Fifth image">
                    <a class="previous" href="#"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
                    <a class="next" href="#"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
                </li>
                <li class="images-item">
                    <img src="images/image_6.png" alt="Sixth image">
                    <a class="previous" href="#"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
                    <a class="next" href="#"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
                </li>
                <li class="images-item">
                    <img src="images/image_7.png" alt="Seventh image">
                    <a class="previous" href="#"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
                    <a class="back-to-start" href="#"><i class="fa fa-refresh" aria-hidden="true"></i></a>
                </li>
            </ul>
        </div>
    </div>
</div>
<script
        src="https://code.jquery.com/jquery-3.2.1.js"
        integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"
        integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
        integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
        crossorigin="anonymous"></script>
<script src="js/script.js"></script>
</body>
</html>

萨斯：

@import "../css/normalize.css";

.header {
  text-transform: uppercase;
}

.list-border {
  border:1px solid #666666;
  border-radius:6px;
  padding:13px;
  clear:both;
  background:#ebebeb;
  box-shadow: 0px 45px 100px -32px #000;
}

ul {
  padding: 0;

  .images-item {
    position: relative;
    list-style: none;

    .next {
      position: absolute;
      top: 50%;
      left: 89%;
    }

    .previous {
      position: absolute;
      top: 50%;
      left: 1%;
    }

    .back-to-start {
      position:absolute;
      bottom: 36%;
      left: 88%;


    }

    .fa {
      font-size: 2rem;
      color: #ffffff;
      background-color: rgba(51, 72, 93, 0.5);
      padding: 15px 20px;
      border-radius: 100%;

      &:hover {
        color: #2bcb72;
        background-color: rgba(255, 255, 255, 0.5);
        transition: all 0.3s ease-in-out;
      }
    }
  }

}

jQuery：

$(document).ready(function () {
    var image = $('ul li img');
    var width = image.width();

    $('ul').wrap('<div id="list-wrapper"/>');

    $('#list-wrapper').css({
        width: function () {
            return width;
        },

        height: function () {
            return image.height();
        },

        position: 'relative',
        overflow: 'hidden',
        padding: '0'

    });

    //Get total of image sizes and set as width of ul
    var totalWidth = image.length * width;
    $('ul').css({
        width: function () {
            return totalWidth;
        }
    });

    $(image).each ( //looking for each of our images in the list
        function (intIndex) {
            $(this).nextAll('a').bind("click", function () { //finding all anchors tags next to the images
                if($(this).is(".next")) {
                    $(this).parent('li').parent('ul').animate({
                        "margin-left": (-(intIndex + 1) * width)
                    },800)
                } else if($(this).is(".previous")) {
                    $(this).parent('li').parent('ul').animate({
                        "margin-left": (-(intIndex - 1) * width)
                    }, 800)
                    } else if ($(this).is(".back-to-start")){
                    $(this).parent('li').parent('ul').animate({
                        "margin-left": (0)
                    }, 800)
                }
            });
        });
});

Belial

Asked: 2020-11-08 01:53:47 +0800 CST

按长度升序排序并输出字符串

0

帮助完成任务：从键盘输入三行。按长度值的升序对字符串进行排序和输出。

单击箭头后，自动播放在光滑的滑块中停止工作

注意：未定义索引：。PHP，通过 $_GET

如何在悬停时用图像替换 div？

滑块中的第二张图片适合第一张图片的可见区域

按长度升序排序并输出字符串

我看不懂措辞

请求的模块“del”不提供名为“default”的导出

"!+tab" 在 HTML 的 vs 代码中不起作用

我正在尝试解决“猜词”的问题。Python

可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件？

Python解析野莓

问题：“警告：检查最新版本的 pip 时出错。”

帮助编写一个用值填充变量的循环。解决这个问题

尽管依赖数组为空，但在渲染上调用了 2 次 useEffect

数据不通过 Telegram.WebApp.sendData 发送

Belial's questions