0

Верстаю макет. Там есть типо галерея работ, вот код:

$(function () {
    let gallery = $(".works__content").clone();
    $(".works__more__btn").click(function () {
        $(".works__content").append(gallery);
    });
}); 
body {
  font-family: sans-serif;
}

.works {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
}

.works__headline {
  margin: 0 auto;
  width: fit-content;
  letter-spacing: 1.8px;
  color: #ffffff;
  font-family: "Parangon 530 C";
  font-size: 36px;
  font-weight: 400;
  padding-top: 25px;
  padding-bottom: 21px;
  padding-left: 186px;
  padding-right: 151px;
  background-image: url(../img/works/OUR_PROJECTS.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.works__text {
  width: 100%;
  height: 120px;
  background-color: #303263;
  padding-top: 21px;
}

.works__content__bigRow {
  display: flex;
}

.works__content__bigRow__item {
  width: 50%;
}

.works__content__smallRow {
  display: flex;
}

.works__content__smallRow__item {
  width: 25%;
  height: 327.61px;
}

.works__more {
  background-color: #303263;
  width: 100%;
  height: 120px;
  padding-top: 27px;
}

.works__more__btn {
  width: 240px;
  height: 66px;
  margin: 0 auto;
  border: none;
  outline: none;
  background-color: #6a6b8e;
  color: #ffffff;
  font-family: "Parangon 530 C";
  font-weight: 400;
  display: block;
  font-size: 24px;
  border-radius: 14px;
  letter-spacing: 1.5px;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <section class="works">
        <div class="works__text">
            <div class="works__headline">ПОСЛЕДНИЕ ПРОЕКТЫ</div>
        </div>
        <div class="works__content">
            <div class="works__content__bigRow">
                <img src="https://www.placehold.it/750x430/125" class="works__content__bigRow__item">
                <img src="https://www.placehold.it/750x430/200" class="works__content__bigRow__item">
            </div>
            <div class="works__content__smallRow">
                <img src="https://www.placehold.it/375x327/25" class="works__content__smallRow__item">
                <img src="https://www.placehold.it/375x327/50" class="works__content__smallRow__item">
                <img src="https://www.placehold.it/375x327/75" class="works__content__smallRow__item">
                <img src="https://www.placehold.it/375x327/100" class="works__content__smallRow__item">
            </div>
        </div>
        <div class="works__more">
            <button class="works__more__btn">ЕЩЕ БОЛЬШЕ</button>
        </div>
    </section>
У меня в jquery коду что-то не правильно и новые работы при нажатии на кнопку появляются только один раз. Что я сделал не так?

1 ответ 1

0

вот это сработает. просто замените в своём коде метод clone() на html()

$(function () {
    let gallery = $(".works__content").html();
    $(".works__more__btn").click(function () {
        $(".works__content").append(gallery);
    });
}); 

почему метод clone() не отрабатывал второй раз я не увереню. у меня есть предположение, но я не сильно образован в jQuery (и слава Богу). просто попрошу взять во внимание, что Вы брали $(".works__content"), клонировали и вставляли его целиком вместе с родителем, что каждый раз бы порождало всё глубже и глубже вложенность. Вам же нужно было клонировать лишь его содержимое

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.