Javascript |将 src 更改为 data-attribute active

Question

我正在尝试根据 'data-active' 的数据属性更改图像的选择。

当 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 {

}}

判断选择了多少个元素的长度，有'true'一旦超过或等于2，则全部重置，应该变为当前的。

这就是我在点击事件上调用函数的方式...

checkState(this, 'steam');

Answer 1

看来您只需将每张图片的 url:

中的 -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 更改为 data-attribute active

Javascript | Change src to data-attribute active

javascript

setattribute