时间戳

首页 > 解决方案 > Javascript在页面重新加载时设置图像边框

javascript - Javascript在页面重新加载时设置图像边框

问题描述

我有一个返回图像缩略图的 php 脚本。脚本如下：

echo '<img class="matchImage" name="matchImages" onclick="clickedImage(this.id)" src="'.$num.'" id="thumbNails'.$filnam.'"/>';

每个图像的 id 将类似于：thumbNails00001、thumbNails00002等。

clickedImage 函数将 imageId 设置为 localStorage。

function clickedImage(clicked_id) {
localStorage.setItem('clickedImg', clicked_id)
//Rest of the code
}

通过javascript，我将边框应用于单击的图像：

$('#loaded_img_panel').on('click', 'figure.item > img', function() {
  $('#loaded_img_panel img').removeClass('active');
  $(this).addClass('active');
})

我正在尝试在页面刷新时绘制单击图像的边框。以下是代码：

window.addEventListener('load', function() {
var selId = localStorage.getItem('clickedImg');
document.getElementById(selId).style.border = "3px solid red";
});

这返回undefined。但是，当我尝试alert(selId)正确返回thumbNails00001或我单击的其他图像的 id 时。我尝试了各种组合，通过尝试将类设置为活动，通过存储单击图像的索引并使用它来设置边框，尝试使用 jQuery 方法在图像的名称参数上使用索引值等。但没有作品。

我正在学习 JavaScript。

标签： javascriptjqueryhtml

解决方案

function clickedImage(clicked_id) {
//localStorage.setItem('clickedImg', clicked_id)
//Rest of the code
}

window.addEventListener('load', function() {
var selId = "thumbNails00002";
document.getElementById(selId).style.border = "3px solid red";
});
<img class="matchImage" name="matchImages" onclick="clickedImage(this.id)" src="https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" id="thumbNails00002"/>

首先，您正在混合 JavaScript 和 Jquery。你应该坚持一个，否则你会感到困惑。

你可以试试Jquery。

$(document).ready(function(){
   var selId = localStorage.getItem('clickedImg');
   $("#"+selId).attr("style","border:3px solid red");
});

您的代码也应该可以使用javascript。右括号被遗漏了。

window.addEventListener('load', function() {
  var selId = localStorage.getItem('clickedImg');
  document.getElementById(selId).style.border = "3px solid red";
});

推荐阅读