Javascript - 如何获取被单击的元素

Question

我正在制作一个非常简单的带有缩略图的照片库，我有一个可以在点击缩略图时更改大图像的工作代码。现在我需要的是为当前活动的缩略图添加绿色边框。

HTML：

<div id="gallery">
    <div id="big">
        <img align="center" src="big/pipe_big.jpg" alt="" id="image" />
    </div>
    <div id="small">
        <img onclick="changeImage('pipe')" src="small/pipe_small.jpg" alt="" />
        <img onclick="changeImage('leaves')" src="small/leaves_small.jpg" alt="" />
        <img onclick="changeImage('orange')" src="small/orange_small.jpg" alt="" />
        <img onclick="changeImage('xuangong')" src="small/xuangong_small.jpg" alt="" />
    </div>
    <div id="small">
        <img onclick="changeImage('grave')" src="small/grave_small.jpg" alt="" />
        <img onclick="changeImage('lotus')" src="small/lotus_small.jpg" alt="" />
        <img onclick="changeImage('tibet_girl')" src="small/tibet_girl_small.jpg" alt="" />
        <img onclick="changeImage('girl_water')" src="small/girl_water_small.jpg" alt="" />
    </div>
</div>

JS：

function changeImage(x){
    var image = document.getElementById('image');
    var active_image = ??????????

    if (x == 'pipe') {
        image.src = 'big/pipe_big.jpg';
    } else if (x == 'leaves') {
        image.src = 'big/leaves_big.jpg';
    } else if (x == 'orange') {
        image.src = 'big/orange_big.jpg';
    } else if (x == 'xuangong') {
        image.src = 'big/xuangong_big.jpg';
    } else if (x == 'grave') {
        image.src = 'big/grave_big.jpg';
    } else if (x == 'lotus') {
        image.src = 'big/lotus_big.jpg';
    } else if (x == 'tibet_girl') {
        image.src = 'big/tibet_girl_big.jpg';
    } else if (x == 'girl_water') {
        image.src = 'big/girl_water_big.jpg';
    }
    active_image.style.border = '2px solid green';
}

所以我需要找到触发该函数的元素并将其放入变量“active_image”中，以便函数“changeImage（）”始终将边框更改为2px纯绿色。请不要使用jQuery解决方案，我需要它是JavaScript。

Answer 1

只需将函数调用更改为包含'this'作为第二个参数：

<div id="gallery">
<div id="big">
    <img align="center" src="big/pipe_big.jpg" alt="" id="image" />
</div>
<div id="small">
    <img id="img1" onclick="changeImage('pipe',this)" src="small/pipe_small.jpg" alt="" />
    <img id="img2" onclick="changeImage('leaves',this)" src="small/leaves_small.jpg" alt="" />
    <img id="img3" onclick="changeImage('orange',this)" src="small/orange_small.jpg" alt="" />
    <img id="img4" onclick="changeImage('xuangong',this)" src="small/xuangong_small.jpg" alt="" />
</div>
<div id="small">
    <img id="img5" onclick="changeImage('grave',this)" src="small/grave_small.jpg" alt="" />
    <img id="img6" onclick="changeImage('lotus',this)" src="small/lotus_small.jpg" alt="" />
    <img id="img7" onclick="changeImage('tibet_girl',this)" src="small/tibet_girl_small.jpg" alt="" />
    <img id="img8" onclick="changeImage('girl_water',this)" src="small/girl_water_small.jpg" alt="" />
</div>

dom元素将在函数中可用。所以你的功能变成了：

var active_element_id;
function changeImage(x,element){
    var image = document.getElementById('image');
    var active_image = element.src;

    if (x == 'pipe') {
        image.src = 'big/pipe_big.jpg';
    } else if (x == 'leaves') {
        image.src = 'big/leaves_big.jpg';
    } else if (x == 'orange') {
        image.src = 'big/orange_big.jpg';
    } else if (x == 'xuangong') {
        image.src = 'big/xuangong_big.jpg';
    } else if (x == 'grave') {
    image.src = 'big/grave_big.jpg';
    } else if (x == 'lotus') {
        image.src = 'big/lotus_big.jpg';
    } else if (x == 'tibet_girl') {
        image.src = 'big/tibet_girl_big.jpg';
    } else if (x == 'girl_water') {
        image.src = 'big/girl_water_big.jpg';
    }
    if(active_element_id){
        var active_element = document.getElementById(active_element_id);
        active_element.style.border = '0px solid green';
    }
    element.style.border = '2px solid green';
    active_element_id = element.getAttribute('id');
}

Answer 2

您可以使用onmouseover和onmouseout以及this.style.borderColor更改颜色，为当前正在悬停的元素添加绿色边框：

<img onmouseover="this.style.borderColor='green'" onmouseout="this.style.borderColor='black'" onclick="changeImage('pipe')" src="small/pipe_small.jpg" alt="" />

工作示例：

＆＃13;

＆＃13;

div {
    border-style: solid;
    border-width: medium;
    border-color: black;
    width: 100px;
    height: 100px;
}

＆＃13;

<div onmouseover="this.style.borderColor='green'" onmouseout="this.style.borderColor='black'"></div><br>
<div onmouseover="this.style.borderColor='green'" onmouseout="this.style.borderColor='black'"></div><br><div onmouseover="this.style.borderColor='green'" onmouseout="this.style.borderColor='black'"></div><br><div onmouseover="this.style.borderColor='green'" onmouseout="this.style.borderColor='black'"></div><br><div onmouseover="this.style.borderColor='green'" onmouseout="this.style.borderColor='black'"></div><br><div onmouseover="this.style.borderColor='green'" onmouseout="this.style.borderColor='black'"></div><br><div onmouseover="this.style.borderColor='green'" onmouseout="this.style.borderColor='black'"></div><br>

＆＃13;

＆＃13;

＆＃13;

Answer 3

你在找这个吗？

var images = document.querySelectorAll( "#gallery img" );
for( i =0; i< images.length; i++ ) {
    images[i].style.border = "0px";
}
var active_image = event.target;

Answer 4

Plunkr Example

对代码进行最少更改的方式：

function changeImage(x){
    var active_image = this;
    var image = document.getElementById('image');

    var images = [],
        containers = document.getElementsByClassName('small');
    for (var i=0,n=containers.length; i < n; i++){
       var imgs = containers[i].getElementsByTagName('img');
       for (var j=0,m=imgs.length; j < m; j++ ){
         images = images.concat(imgs[j]);
       }
    }

    if (x == 'pipe') {
        image.src = 'big/pipe_big.jpg';
    } else if (x == 'leaves') {
        image.src = 'big/leaves_big.jpg';
    } else if (x == 'orange') {
        image.src = 'big/orange_big.jpg';
    } else if (x == 'xuangong') {
        image.src = 'big/xuangong_big.jpg';
    } else if (x == 'grave') {
        image.src = 'big/grave_big.jpg';
    } else if (x == 'lotus') {
        image.src = 'big/lotus_big.jpg';
    } else if (x == 'tibet_girl') {
        image.src = 'big/tibet_girl_big.jpg';
    } else if (x == 'girl_water') {
        image.src = 'big/girl_water_big.jpg';
    }
    // reset border
    for (var i=0,n=images.length;i<n;i++){
      images[i].style.border = '0px solid green';
    }
    // set active border
    active_image.style.border = '2px solid green';
}

请注意，您不能拥有两个具有相同ID的元素（例如small），因此您必须使用类，或将ID更改为唯一名称。

另请注意，如果您使用call()方法，则可以传递this的内容。在这种情况下，它很重要，因为您想要传递被单击的元素。因此对于onclick="<function name>.call(this)"，this就是那个元素。

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div id="gallery">
    <div id="big">
        <img align="center" src="big/pipe_big.jpg" alt="" id="image" />
    </div>
    <div class="small">
        <img onclick="changeImage.call(this,'pipe')"       src="small/pipe_small.jpg" alt="" />
        <img onclick="changeImage.call(this,'leaves')"     src="small/leaves_small.jpg" alt="" />
        <img onclick="changeImage.call(this,'orange')"     src="small/orange_small.jpg" alt="" />
        <img onclick="changeImage.call(this,'xuangong')"   src="small/xuangong_small.jpg" alt="" />
    </div>
    <div class="small">
        <img onclick="changeImage.call(this,'grave')"      src="small/grave_small.jpg" alt="" />
        <img onclick="changeImage.call(this,'lotus')"      src="small/lotus_small.jpg" alt="" />
        <img onclick="changeImage.call(this,'tibet_girl')" src="small/tibet_girl_small.jpg" alt="" />
        <img onclick="changeImage.call(this,'girl_water')" src="small/girl_water_small.jpg" alt="" />
    </div>
</div>
  </body>

</html>

Big Note

您可以对代码做更多的事情，使其更具可扩展性和效率，这只是一个初步的答案，而不会让您太过困惑。请继续学习，不断学习和扩展知识。

Answer 5

您可以在事件处理程序中使用this来获取元素。但是，由于您使用内联事件处理程序，在changeImage内，this将是另一个值（您仍然可以使用call，apply或作为参数传递它。

但是，最好避免使用内联事件侦听器：

var image = document.getElementById('image'),
    images = document.getElementById('small').getElementsByTagName('img');
for(var i=0; i<images.length; ++i)
  images[i].addEventListener('click', changeImage);

function changeImage(){
  var x = this.getAttribute('data-img');
  image.src = 'big/' + x + '_big.jpg';
  this.style.border = '2px solid green';
}

<div id="gallery">
  <div id="big">
    <img align="center" src="big/pipe_big.jpg" alt="" id="image" />
  </div>
  <div id="small">
    <img data-img="pipe" src="small/pipe_small.jpg" alt="" />
    <img data-img="leaves" src="small/leaves_small.jpg" alt="" />
    <img data-img="orange" src="small/orange_small.jpg" alt="" />
    <img data-img="xuangong" src="small/xuangong_small.jpg" alt="" />
    <img data-img="grave" src="small/grave_small.jpg" alt="" />
    <img data-img="lotus" src="small/lotus_small.jpg" alt="" />
    <img data-img="tibet_girl" src="small/tibet_girl_small.jpg" alt="" />
    <img data-img="girl_water" src="small/girl_water_small.jpg" alt="" />
  </div>
</div>