Question

我有一个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 ...任何帮助将不胜感激。

Answer 1

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";
});

Javascript在页面上设置图像边框重新加载

1 个答案: