Question

更具体地说，我尝试使用一系列img图块，当选择一个图块时，它会收到一个边框。当选择同一个类的不同图像图块时，它将接收边框，而之前选择的图像将删除它的边框。

一个很好的例子类似于本网站上的第一个例子： http://rvera.github.io/image-picker/

重要提示：我正在尝试 避免使用jQuery 并找到纯粹的Javascript解决方案。没有什么可以反对jQuery，我只是通过这个项目来避免它。

这是我的代码......

CSS：

<style>
.tile {
    width:100px;
    height:100px;
    cursor:pointer;
}
</style>

JavaScript的：

<script>
function example ()
{
    var i;                                                       // Counter
    var tilecount = document.querySelectorAll( '.tile' ).length; // Number of elements of the "tile" class
    var tilearray = document.getElementsByClassName( 'tile' );   // All tile elements

    for ( i = 0; i < tilecount; i++ )
    {
        if ( tilearray[i].style.border == 'none' )
        {
            tilearray[i].style.border = '5px solid #2c2d2d';
        }

        else
        {
            tilearray[i].style.border = 'none';
        }
    }
}
</script>

HTML：

<table>
    <tr>
        <td><img onclick="example()" class="tile" src="http://i.imgur.com/jlQyrWk.jpg" /></td>
        <td><img onclick="example()" class="tile" src="http://i.imgur.com/H6qGF5Z.jpg" /></td>
        <td><img onclick="example()" class="tile" src="http://i.imgur.com/76hOij3.png" /></td>
    </tr>
</table>

不幸的是，我的代码不起作用，我想我会在Stack Overflow选择专家的大脑。再一次，请不要jQuery。

Answer 1

您可以在调用函数时添加this引用，在函数循环中添加元素，删除边框并为正在单击的边框添加边框。

＆＃13;

function example(el) {
  var tilearray = document.getElementsByClassName("tile"); // All tile elements.
  for(i = 0; i < tilearray.length; i++) {
    tilearray[i].style.border = '';
  }
  el.style.border = "5px solid #2c2d2d"
}

＆＃13;

.tile {
  width: 100px;
  height: 100px;
  cursor: pointer
}

＆＃13;

<table>
  <tr>
    <td>
      <img onclick="example(this)" class="tile" src="http://i.imgur.com/jlQyrWk.jpg" />
    </td>
    <td>
      <img onclick="example(this)" class="tile" src="http://i.imgur.com/H6qGF5Z.jpg" />
    </td>
    <td>
      <img onclick="example(this)" class="tile" src="http://i.imgur.com/76hOij3.png" />
    </td>
  </tr>
</table>

＆＃13;

Answer 2

由于一直选择最多1个元素，因此无需遍历所有元素。

您可以在公共变量中存储最后一个被点击的对象。

然后，当您单击一个新元素时，您已经拥有了之前选择的元素的引用。

<table>
<tr>
<td><img onclick="example(this)" class="tile" src="http://i.imgur.com/jlQyrWk.jpg" /></td>
<td><img onclick="example(this)" class="tile" src="http://i.imgur.com/H6qGF5Z.jpg" /></td>
<td><img onclick="example(this)" class="tile" src="http://i.imgur.com/76hOij3.png" /></td>
</tr>
</table>

JS：

var lastSelectedItem;
function example(element) {
    if(lastSelectedItem)
        lastSelectedItem.style.border = "none";
    element.style.border = "1px solid black";
    lastSelectedItem = element;
}

http://jsfiddle.net/u05e1gLv/

Answer 3

将变量解析到函数中，然后使用它来选择元素。

注意按钮通过“选择”按钮调用该功能。变量，用于选择正确的元素。

另外，你不需要在for循环之前声明i变量，这就是循环中i = 0的含义。

<table>
<tr>
<td><img onclick="example(0)" class="tile" src="http://i.imgur.com/jlQyrWk.jpg" /></td>
<td><img onclick="example(1)" class="tile" src="http://i.imgur.com/H6qGF5Z.jpg" /></td>
<td><img onclick="example(2)" class="tile" src="http://i.imgur.com/76hOij3.png" /></td>
</tr>
</table>



function example(select) {    
var tilecount = document.querySelectorAll('.tile').length; // Number of elements of the "tile" class.
var tilearray = document.getElementsByClassName("tile"); // All tile elements.

for(i = 0; i < tilecount; i++) {        
    tilearray[i].style.border = "none";
}
 tilearray[select].style.border = "5px solid #2c2d2d";

}

如何将样式应用于类的单个元素，同时从同一个类的前一个元素中删除样式？

3 个答案: