Question

当我选择它时，我想在图片周围画一个边框。所以，如果我有6张图片并选择3张，我想在这些图片周围突出显示边框。问题是，我该怎么做？编辑：我正在使用React来解决这个难题。

Answer 1

这取决于您希望如何跟踪应用中的状态。here是一个跟踪父组件中状态的示例。基本上你有一个单一的父App组件跟踪每个图像的状态，然后是一个Image组件，它有或没有边框呈现，这取决于作为prop传递下来的App状态的一部分。请参阅代码以了解我的意思。另一种方法是让活动状态存在于每个Image组件本身中。

代码有许多有趣的功能，主要是因为利用ES6的几个方面更加简洁，以及React's immutability helper以不可变的方式帮助更新状态数组，以及lodash＆＃39; s { {3}}方法来帮助创建我们的初始状态数组。

代码（一些缩进在jsfiddle的副本中有点混乱......）：

<head>
<link rel="stylesheet" type="text/css" href="/fancybox/source/jquery.fancybox.css" />
<link rel="stylesheet" type="text/css" href="/fancybox/source/helpers/jquery.fancybox-buttons.css" />

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/fancybox/source/jquery.fancybox.pack.js"></script>
<script src="/fancybox/source/helpers/jquery.fancybox-buttons.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('.popupIframe').fancybox({
        autoDimensions: false,
        padding     : 0,
        width       : 400,
        height      : 300,
        autoScale   : false,
        type        : 'iframe',
        openEffect  : 'elastic',
        closeEffect : 'elastic',
        nextEffect  : 'elastic',
        prevEffect  : 'elastic',
        topRatio    : 0,
        margin      : [20, 60, 20, 60], // Increase left/right margin
    });
});
</script>

</head>

<body>
<a class="popupIframe" href="/fancybox/media/2.mp4"><img src="/fancybox/media/2_thumb.jpg" alt="" /></a>
</body>

然后它看起来像：

times

Answer 2

只需为点击添加一个事件处理程序即可添加＆＃34;已选中＆＃34; class，然后将所选类设置为在css中有一个边框。

＆＃13;

.selectableImg {
  border: solid 1px transparent;
  margin: 10px;
}

.selectableImg.selected {
  border: solid 1px blue;
}

＆＃13;

<img class="selectableImg"  src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
<img class="selectableImg" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
<img class="selectableImg" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
<img class="selectableImg" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>

<script>
  var images = document.querySelectorAll(".selectableImg");
  
  images.forEach(function(i) {i.addEventListener("click", function(event) {
    i.classList.toggle("selected");
    })});
  </script>

＆＃13;

REACT：在所选图像周围添加突出显示的边框

2 个答案: