Javascript |将 src 更改为数据属性事件

Question

我正在尝试根据“数据事件”的数据属性更改图像的选择。

当 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');

Answer 1

看来您只需将每个图像的网址中的 -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');
}