如何突出显示单击的图像并在列表中显示其名称

Question

有图像。当我点击其中一个时，我想突出显示它并在列表中显示它的名称。

HTML

<img class="high" id="x" src="images/Chrysanthemum.jpg" alt="Chrysanthemum" width="300" height="200" onclick="mySelect()">

JS

function mySelect() {
    document.getElementById("x").style.border = "3px dotted blue";
}

我使用此代码突出显示。但是，当我点击任何图像时，它都不会突出显示。它只突出显示第一张图片。

当我点击图片时，它应该突出显示。它的名称应显示在相应的<li>中。

当我点击另一张图片时，它应该突出显示这张图片并取消高亮之前的。相应的<li>的名称应替换为占位符。

Answer 1

通过＆＃34;图像的名称＆＃34;你是男人＆＃34; alt＆＃34;图像元素中的文字？

var imageName = document.getElementById("x").getAttribute("alt");

document.getElementById("firstName").innerHtml = imageName

Answer 2

我在普通的JS中做了一个解决方案，不需要jQuery。我想这是你要求的或接近所需的解决方案？

＆＃13;

＆＃13;

var images = document.getElementsByClassName("high");
var list = document.getElementById("lstNames");
for(var i = 0; i < images.length; i++)
{
	images[i].addEventListener("click", onSelection, false);
  var a = document.createElement("a");
  
  a.setAttribute("href", "#");
  a.setAttribute("data-index", i);
  a.innerHTML = images[i].getAttribute("alt");  
  a.addEventListener("click", highlightImage, false);
  
  
  var li = document.createElement("li");
  li.appendChild(a);
  
  
  list.appendChild(li);
}
  
  
  function highlightImage()
  {
  	var index = this.getAttribute("data-index");
    for(var i = 0; i < images.length; i++)
    	images[i].style.border = "";
      
    images[index].style.border = "3px dotted blue";
  }




function onSelection()
{
	for(var i = 0; i < images.length; i++)
  	images[i].style.border = "";



	if(this.style.border === "")
  {
  	this.style.border = "3px dotted blue";
  }
  else
  {
		this.style.border = "";
  }
}

＆＃13;

.wrapper {
  width: 100%;
}

.details {
  width: 15%;
  height: 150px;
  float: left;
}

#lstNames {
  display: inline;
}

#lstNames li {
  list-style: none;
}


.images {
  width: 84%;
  float: left;
  
}


.high {
  width: 200px;
  height: 150px;
}

＆＃13;

<div class="wrapper">
  <div class="details">
  <u>Image selection</u>
  <br/>
  <ul id="lstNames">
  
  </ul>
  </div>
  <div class="images">
    <img class="high" src="http://media.mnn.com/assets/images/2015/09/pink-chrysanthemum.jpg.638x0_q80_crop-smart.jpg" alt="Chrysanthemum"/>
    <img class="high" src="http://www.caoping8.com/wp-content/uploads/2014/06/popular-landscaping-pleasant-landscaping-companies-hiring-in-las-vegas-landscaping-las-vegas-jobs-jaramillo-landscaping-las-vegas-jeffs-landscaping-las-vegas-landscaping-jobs-las-vegas-nevada-j.jpg" alt="Rock landscape"/>
    <img class="high" src="http://www.essentialnaturaloils.com/image/data/white%20lotus%202.jpg" alt="Flower"/>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

有两件事要做：

1. 切换班级名称

2. 交换 (function() { console.log('logging1...'); })(); var func1 = function() { console.log('func1 invoked!'); }; func1(); li.innerHTML

   img.alt

完整示例：

// List.children.lenght and imgs.children.length must always be the same!

var imgs = document.getElementById("images");
var list = document.getElementById("list");
var cN = "active";

for (var i = 0; i < imgs.children.length; i += 1) {
    (function(i) {
        imgs.children[i].addEventListener("click", function() {
            this.className === "" ? this.className = cN : this.className = ""; // Toggle class name

            // Swap img.alt with li.innerHTML
            var temp = list.children[i].innerHTML;
            list.children[i].innerHTML = this.alt;
            this.alt = temp;
        });
    })(i);
}

// List.children.lenght and imgs.children.length must always be the same!

var imgs = document.getElementById("images");
var list = document.getElementById("list");
var cN = "active";

for (var i = 0; i < imgs.children.length; i += 1) {
    (function(i) {
        imgs.children[i].addEventListener("click", function() {
            // Toggle class name
            this.className === "" ? this.className = cN : this.className = ""; 

            // Swap img.alt with li.innerHTML
            var temp = list.children[i].innerHTML;
            list.children[i].innerHTML = this.alt;
            this.alt = temp;
        });
    })(i);
}

.container ul {
    padding: 0;
    list-style: none;
}

.container ul,
.container #images {
    float: left;
    margin: 15px;
}

.container #images img:hover {
    cursor: pointer;
}

.active {
    border: 3px dotted brown;
}

Answer 4

可以通过一些操作完成：

  

1 - 获取元素

要获得The Element，有五种方法可以实现：

• document.getElementById('idName')
• document.getElementsByClassName('class name')[element index]（0基本索引）
• document.getElementsByTagName('tag name')[element index]（0基本索引）
• document.querySelectorAll('.class or #id or tag')[element index]（0基本索引）
• document.querySelector('.class or #id or tag')（将返回第一个元素）

例如，我们将按类名获取元素：

var image = document.getElementsByClassName('high')[0];

但[0]将获得第一张图像，我们需要获取所有图像，因此我们将使变量等于0并增加它直到它使用{{1}到达最后一个图像（images.length） }循环，然后把这个变量而不是0

for

  

2 - 每次单击重置所有图像的边框

使用带有新变量的新var image = document.getElementsByClassName('high'); for ( var i = 0; i < image.length; i++ ) { image[i].addEventListener('click', function () { // functions to be invoked }); } 循环创建一个重置所有图像边框的功能

for

  

3 - 为点击的元素添加边框

对于这部分，我们将创建一个函数并给它一个参数。然后我们将风格添加到参数

，而不是使用function resetBorder() { for (var v = 0; v < images.length; v++) { images[v].style.border = ''; } } （因为它将被引用到函数）

this.style.border

然后在调用函数function addBorderTo(thisImage) { thisImage.style.border = '4px solid #00f'; }

时将参数更改为this

  

4 - 显示点击元素的详细信息

我们将获取保存图像细节的元素（addBorderTo(this);或p） ，然后通过上述函数

获取包含图像名称的单击图像的alt属性

li

然后代码可以优化为：

https://jsfiddle.net/89znymLm/4/

function showImageDetails(thisImage) {
    var imgDetails = document.querySelectorAll('.imgDetails p')[1];
    imgDetails.textContent = thisImage.getAttribute('alt');
}

var images = document.getElementsByClassName('high');
var imagesLen = images.length;
var imgDetails = document.querySelectorAll('.imgDetails p')[1];

// loop through each image and and addEventListener for each one
for ( var i = 0 ; i < imagesLen; i++) {
  images[i].addEventListener('click', function () {
    resetBorder();
    addBorderTo(this);
    showImageDetails(this);
  });
}

// make a new loop for each click and reset images by it
function resetBorder() {
  for (var v = 0; v < imagesLen; v++) {
    images[v].style.border = '';
  }
}

function addBorderTo(thisImage) {
  thisImage.style.border = '4px solid #00f';
}

function showImageDetails(thisImage) {
  imgDetails.textContent = thisImage.getAttribute('alt');
}

.cont {
  width: 700px;
  list-style-type: none;
  overflow: hidden
}

.imgDetails {
  width: 100px;
  float: left;
  margin-top: 30px
}

.imgDetails p:first-child {
  text-decoration: underline;
}

.imagesHolder { 
  float: left
}

.imagesHolder li {
  display: inline-block
}

Answer 5

这是解决问题的一种方法：

HTML：

<div>
<div><img class='image' title="title 1" src="https://www.mathconsult.ch/static/unipoly/33.256.gif" ></div>
<div><img class='image' title="title 2" src="https://www.mathconsult.ch/static/unipoly/33.256.gif" ></div>
<div><img class='image' title="title 3" src="https://www.mathconsult.ch/static/unipoly/33.256.gif" ></div>

</div>

CSS

.image{
width:150px;
height:150px;
float:left;
cursor:pointer;
}

.active{
  border:1px solid #ff0000;

}

.title{

}

JS

$('document').ready(function(){

   $('.image').click(function(){

   $('.title').remove();
   $('.image').removeClass('active'); //removes old active class

   $(this).addClass('active');
   $(this).before("<div class='title'>"+$(this).attr("title")+"</div>");


});

});

jsFiddle