javascript - img CSS 不会通过 jQuery 更新 onclick

Question

几个小时以来，我一直在努力解决这个问题，但与以前相比，我并没有更接近解决方案。我正在动态生成<img>标签，每个标签都有自己唯一的 ID，通过 AJAX 调用和 JavaScript 并在生成时为它们提供特定的边框颜色(标记它们是“好”还是“坏”)。

// the div that the screenshots go in
<div id ="screenshots_holder"> </div>


// the JS that is generating the screenshots

var screenshots_holder = document.getElementById("screenshots_holder");
var x = "";


for(i in data.screenshots) {

var image_name = data.screenshots[i].split("/")

x += '<img id="' + image_name[2] +'"src="/static/'; 
x += data.screenshots[i]; 
x += '" style = "height: auto; border-style: solid; border-width: 5px; border-color: #1ebe1e; max-width: 10%; margin-right: 10px; margin-bottom: 10px; "'; 
x += 'onclick="blueifyScreenshot(this.id)" >'; <-- the problem is here!!

}
screenshots_holder.innerHTML = x;

上面的代码工作得很好...减去我添加 onclick 的最后一部分。属性!

我试图做到这一点，以便当我单击屏幕截图时，它的边框会改变颜色，它会稍微缩放，并添加一个框阴影，所有这些都是通过名为 blueifyScreenshot(id) 的 JavaScript 函数完成的。它以图像的唯一 id 作为参数，以便可以通过 jQuery 抓取它。

现在，当我将鼠标悬停在屏幕上时，我可以获取屏幕截图来执行此操作，但这不是永久的。不幸的是，我无法完成任何 CSS 更改。

现在我正在通过 jQuery id 选择器获取每个图像元素。我知道这是有效的并且 updated_id应该是这样，因为我已经通过调试器中的 HTML/JS 断点验证了它，并将其与我想要更改边框的屏幕截图相匹配。 blueifyScreenshot正在被调用，但无论我做什么，CSS 都没有改变。

我尝试过使用.css方法，我知道它只适用于现有元素，我的屏幕截图就是。

function blueifyScreenshot(id) {

console.log("#" + id);
var updated_id = "#" + id;

// this isn't changing anything
$(updated_id).css({
   "border-color": "#0614d1 !important",
   "cursor" : "pointer" ,
   "transform": "scale(1.1)",
   "box-shadow": "0 0 12px #0614d1" });

}

我尝试添加一个类 .addClass()并在我的 .css 表中定义它。

function blueifyScreenshot(id) {

console.log("#" + id);
var updated_id = "#" + id;

// this isn't changing anything either..
$(updated_id).addClass('selected_screenshot');

}
/* CSS */

.selected_screenshot {

    border-color: #0614d1 !important;
    cursor : pointer;
    transform: scale(1.1); 
    box-shadow: 0 0 12px #0614d1; 
}

我什至尝试使用 .attr() 更新图像的样式属性方法。

function blueifyScreenshot(id) {

console.log("#" + id);
var updated_id = "#" + id;

// and THIS wont change anything.
$(updated_id).attr('style', "height: auto; border-style: solid; border-width: 5px; border-color: #0614d1; max-width: 10%; margin-right: 10px; margin-bottom: 10px;");

}

这一切都不起作用，当我点击它们时，我的屏幕截图也没有改变。我尝试浏览 StackOverflow，看看其他人是否也遇到此问题，看起来每个人都能够通过我尝试过的方法解决他们的问题。

有人能够提供帮助，或者可能发现我没有发现的东西吗？

Answer 1

只需引用元素

onclick="blueifyScreenshot(this)"

并切换一个类

function blueifyScreenshot(elem) {
  elem.classList.toggle('active')
}

就我个人而言，我只会使用 dom 方法

var images = [
  'http://placekitten.com/100/300',
  'http://placekitten.com/200/200',
  'http://placekitten.com/200/300',
  'http://placekitten.com/100/200'
]

var outElem = document.getElementById('out')

images.forEach(function(src) {
  var img = document.createElement('img');
  img.className = 'example'
  img.src = src
  img.addEventListener('click', function() {
    this.classList.toggle('selected')
  })
  outElem.appendChild(img)
})

img.example {
  height: auto;
  border-style: solid;
  border-width: 5px;
  border-color: #1ebe1e;
  max-width: 10%;
  margin-right: 10px;
  margin-bottom: 10px;
}

img.example.selected {
  border-color: #0614d1 !important;
  cursor: pointer;
  transform: scale(1.1);
  box-shadow: 0 0 12px #0614d1;
}

<div id="out"></div>