Question

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

当数据活动等于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，那么它们都会被重置并且应该更改为当前的。

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

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

Javascript |将src更改为data-attribute active

1 个答案: