Question

我需要表示用户在单击某个元素时选择了一个选项。

我有一个像这样的小球网格：

. . . .
. . . .
. . . .
. . . .

我使用带有border-radius 的 div来表示每个球，并尝试在他们拥有类.active（通过JS添加）时添加背景图像。但是图像被div切割，所以我需要另一种方式。

我按照这样构建网格：1格＆gt; （行＆gt;（球）* 4）* 4）。最初我每行有5行10个球。调整值以匹配此处的示例。

问题在于，当球被选中时，它应该显示一个比div更大的图像，并且增加球的大小对我来说不是一个选项我想找到一个更好的方法解决这个问题

before == . -- AFTER CLICK --> X(custom image over the ball)

我应该如何以简单的方式做到这一点？使用JS和CSS，一切都是可选的。由于动作是可逆的（可切换），我还需要一种方法来删除。

铊;博士

如何通过在点击时将图像（任何html元素或CSS技巧可以执行）放在此球上来显示选择球。

小例子： https://jsfiddle.net/f25nLw3k/

回答：

https://jsfiddle.net/f25nLw3k/2/感谢@Omer

Answer 1

好吧，我想我的代码中有解决方案。

我刚在你的JS中添加了两行并写了一些scss来制作球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小提琴链接：https://jsfiddle.net/omerblink/f25nLw3k/3/

您可以将<span class="bigger-ball"></span>替换为<img>：）

Answer 2

这可以使用背景图像完成。如果图片太大，您可以设置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/

Answer 3

这可以使用CSS和Javascript完成。

只需切换每个active的{{1}}类。将ball定义为具有边距，而ball active不定义。

ball

选择将图像放在元素上以表示它

3 个答案: