我正在尝试根据“数据事件”的数据属性更改图像的选择。
当 data-active 等于 true 时,它将把图像更改为表明该平台已被选择的图像,并且所有其他平台都取消选择,仅显示一个。
我当前遇到的问题是图像正在传递到当前单击的平台,因此它将取消选择的图像更改为当前禁用的单击图像,因此图像变得困惑。
你可以在这里看到这个... https://miotks.co.uk/register (我有一个自行分配的证书)
这是我当前的代码...
function checkState(obj, platform) {
var checkActive = document.querySelectorAll("[data-active='true']");
var alreadyActive = checkActive.length;
if (alreadyActive >= 2) {
for (var i = 0; i < checkActive.length; i++) {
// Reset the images to the default when all changed to false.
checkActive[i].setAttribute('data-active', 'false');
checkActive[i].setAttribute('src', '/images/' + platform + '-noselect.png' );
obj.setAttribute('data-active', 'true');
obj.setAttribute('src', '/images/' + platform + '-select.png');
}
} else {
}}
它判断选择了多少个元素的长度,一旦超过或等于2,则为“true”,然后它们都会被重置并应更改为当前的。
这就是我在点击事件上调用函数的方式...
checkState(this, 'steam');
最佳答案
看来您只需将每个图像的网址中的 -select
更改为 -noselect
即可:
function checkState(obj, platform) {
var checkActive = document.querySelectorAll("[data-active='true']");
var alreadyActive = checkActive.length;
if (alreadyActive) {
for (var i = 0; i < checkActive.length; i++) {
// Reset the images to the default when all changed to false.
checkActive[i].setAttribute('data-active', 'false');
checkActive[i].src = checkActive[i].src.replace('-select', '-noselect');
}
}
obj.setAttribute('data-active', 'true');
obj.src = obj.src.replace('-noselect', '-select');
}
关于Javascript |将 src 更改为数据属性事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43311532/