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

How to apply style to a single element of a class, while removing style from the previous element of the same class?

本文关键字：元素 样式 一类 一个 删除 单个 应用于      更新时间：2023-09-26
更

具体地说，我正在尝试使用一系列img图块，当选择一个时，它会收到一个边框。当选择同一类的不同图像磁贴时，它将接收边框，而先前选择的 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。

由于始终最多选择 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/

您可以在

调用函数时简单地添加this引用，并在函数中循环访问元素，删除它们的边框并向正在单击的元素添加边框。

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"
}
.tile {
  width: 100px;
  height: 100px;
  cursor: pointer
}
<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>

将

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

请注意，按钮使用"select"变量调用函数，该变量用于选择正确的元素。

此外，您不需要在 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";

}

相关文章：