CSS и JavaScript нажмите на кнопку, чтобы создать элементы карты

-1

Скажем, у меня есть пустая страница и кнопка (где-то в правом верхнем углу). Когда я нажимаю эту кнопку, я хочу создать квадрат на странице (Карта контакта). И когда я снова нажимаю на него, я хочу создать рядом с ним другую карту с такими же размерами и т. Д. (Т. Е. Каждый клик добавляет карту до тех пор, пока номер 4 в рулоне не начнется в нижней части карты, пока вся страница не будет заполнена).CSS и JavaScript нажмите на кнопку, чтобы создать элементы карты

Я не уверен, как я могу это сделать. Я знаю, как вставить кнопку и событие клика, просто не уверен, как я могу структурировать это. Должен ли я использовать flex?

Спасибо заранее,

источник

2016-07-12 Jeffery smith

Вы написали любой код до сих пор для нас, чтобы увидеть/помочь вам .. .? – Stuart

У вас может быть скрытый элемент, предпочтительно div с желаемыми настройками CSS по умолчанию на странице. При нажатии кнопки вы можете использовать метод code'.clone'code для клонирования существующего div и установки его отображения для блокировки. Таким образом, вы сможете генерировать n полей в пользовательском интерфейсе. –

Привет, Стюарт, я еще не написал код. Я пытаюсь представить себе, как я могу решить эту проблему. –

Я пытаюсь представить себе, как я могу решить эту проблему.

Должен ли я использовать flex?

В 2016 году flex был бы лучшим способом приблизиться к созданию горизонтальных рядов, каждый из которых содержит 4 элемента равной ширины, да.

Но если вы хотите, решение устаревших-браузера, вы можете также использовать

display: inline-block;
float: left;
width --px;

и контейнер с явно заданной шириной, что означает, что каждый элемент :nth-of-type(4n+1) будет запущен в новой строке.

Например:

.card { 
display: inline-block; 
float: left; 
width: 100px; 
margin: 12px; 
}

означает, что каждая карта требует 124px пространства (12px + 100px + 12px).

Так что, если вы даете явную ширину 4 х 124 .card-container:

.card-container { 
width: 496px; 
}

затем через каждые 4 карты, следующая карта будет начинаться с новой строки.

источник

2016-07-12 10:02:47 Rounin

Вот прототип быстрого использования с использованием jQuery и Twitter Bootstrap.

При нажатии на кнопку отображается первая карта с классом card-hidden, и ее класс card-hidden снят. Следующая кнопка будет отображать следующую карту до тех пор, пока карты не останутся.

HTML

<html> 
<body> 
    <button id="button">Add</button> 
    <div class="container"> 
    <div class="row"> 
     <div class="card card-hidden col-xs-3">1</div> 
     <div class="card card-hidden col-xs-3">2</div> 
     <div class="card card-hidden col-xs-3">3</div> 
     <div class="card card-hidden col-xs-3">4</div> 
    </div> 
    </div> 
</body> 
</html>

CSS

.card { 
    height: 200px; 
} 
.card-hidden { 
    display: none; 
}

$("#button").on("click", function(e) { 
if ($(".card-hidden").length > 0) { 
    $(".card-hidden").first().slideToggle(function() { 
     $(this).removeClass("card-hidden"); 
    }); 
} else { 
    console.log("No more cards to show."); 
} 
});

источник

2016-07-12 10:04:55

CSS и JavaScript нажмите на кнопку, чтобы создать элементы карты

ответ

Смежные вопросы