Мне нужно представить, что пользователь выбрал опцию при нажатии на какой-либо элемент.
У меня есть сетка маленьких шариков, вот так:
. . . .
. . . .
. . . .
. . . .
Я использовал div с border-radius для представления каждого шара и пытался добавить фоновое изображение, когда на них есть класс .active
(добавленный через JS). Но изображение вырезано div, поэтому мне нужен другой способ.
Я структурировал сетку так: 1 сетка> (строка> (шарики) * 4) * 4). Изначально у меня 5 рядов и 10 шаров на ряд. Скорректированы значения в соответствии с примером здесь.
Проблема в том, что когда мяч выбран, он должен показывать одно изображение больше, чем div, и увеличение размера шара - не вариант для меня. Я хочу найти лучший подход к этой проблеме .
before == . -- AFTER CLICK --> X(custom image over the ball)
Как я должен сделать это упрощенно? Используя JS и CSS, все возможно. Поскольку действие является обратимым (переключаемым), мне также нужен способ удаления.
< Сильный > Tl ; р
Как показать, что шар выбран, поместив изображение (любой элемент HTML или трюк CSS) над этим шаром при нажатии.
Скрипка примера: https://jsfiddle.net/f25nLw3k/
Возиться с ответом:
https://jsfiddle.net/f25nLw3k/2/ благодаря @Omer
3 ответа
Ну, я думаю, у меня есть решение в том же коде.
Я просто добавил две строки в ваш JS и написал scss, чтобы сделать div div position: relative
$('.ball.active').on('click', function(e) {
var node = $(e.target);
node.removeClass('active');
node.find('.bigger-ball').remove();
})
$('.ball').on('click', function(e) {
var node = $(e.target);
$('.ball.active').each(function(e) {
$(this).removeClass('active');
$(this).find('.bigger-ball').remove();
});
node.addClass('active');
node.append('<span class="bigger-ball"></span>');
});
Вот ссылка JS Fiddle: https://jsfiddle.net/omerblink/f25nLw3k/3/
Вы можете заменить <span class="bigger-ball"></span>
на <img>
:)
Это можно сделать с помощью CSS и Javascript.
Просто переключите класс active
каждого ball
. Определите ball
для полей, а active
ball
- нет.
.ball {
margin: 10px;
width:1px;
background: black;
}
.ball.active {
margin: 0;
width: 11px;
background: url(/path/to/img);
}
Это можно сделать с помощью фоновых изображений. Если изображение слишком большое, вы можете установить background-size: cover;
JQuery:
// If you click on a cell
$('.column').click(function() {
// Remove the active class from all cells
$('.column').removeClass('active');
// Give this cell the active class
$(this).addClass('active');
});
CSS:
.column {
background-image: url('default.png');
background-size: cover;
}
.column.active {
background-image: url('active.png');
}
< Сильный > JSFIDDLE : https://jsfiddle.net/na7pehLn/3/
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.