Question

我有三个图像，每个图像都有一个值，所以第一个img = 1，第二个img = 2，第三个img = 3。

我无法弄清楚如何选择一个，让其他人看起来透明并使用所选图像的值？

有没有办法通过html5，css3？

来实现

下面是一个类似我点击时的示例（在示例中它基于悬停）：

http://jsbin.com/umacat/4/edit

提前致谢！

Answer 1

这是我的策略：

将切换状态（例如clickToggle）存储为每个元素中的数据对象。
点击时更新clickToggle值 - 此值也会被选中并允许确定操作模式
在评估clickToggle的值后执行必要的操作。我们不会使用:hover来切换要添加/删除的类。

这是更新的CSS：

.box.toggled {
   box-shadow: 0 2px 8px #334;
   background:#ccd;
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
   opacity:1;
}

以下是我的代码，以及demonstrated to be working：

$(function(){
  $('.box').on('click', function(e) {
    // Prevent default function
    e.preventDefault();

    // Check state
    if(!$(this).data('clickToggle') || $(this).data('clickToggle') === 0) {

      // Update state, add class
      $(this)
      .data('clickToggle', 1)
      .addClass('toggled');

      // Force siblings to revert to original state
      $(this)
      .siblings()
        .data('clickToggle', 0)
        .removeClass('toggled');

    } else if($(this).data('clickToggle') === 1) {

      // Update state, remove class
      $(this)
      .data('clickToggle', 0)
      .removeClass('toggled');
    }
  });
});

点击图像后，与其他图像相比，它会“弹出”吗？

1 个答案: