Question

我正在尝试创建一个脚本，可以通过单击练习链接来打开和关闭图像。我试图选择一个＆＃34;数据 - ＆＃34;属性，但当我尝试将其定义为变量时，它不会识别它。它给了我零错误。

这是我的HTML：

<a data-img="image1" id="ugur1" class="btn btn-default" href="#" role="button">Toggle Image one</a>
<a data-img="image2" id="ugur2" class="btn btn-default" href="#" role="button">Toggle Image two</a>
<a data-img="image3" id="ugur3" class="btn btn-default" href="#" role="button">Toggle Image three</a>

<img src="C:\Users\Ugur Aydin\Desktop\Coding\Javascript\Images\Image1.png" class="img-responsive img hide" id="ugurpic1" alt="Responsive image" />
<img src="C:\Users\Ugur Aydin\Desktop\Coding\Javascript\Images\Image2.png" class="img-responsive img hide" id="ugurpic2" />
<img src="C:\Users\Ugur Aydin\Desktop\Coding\Javascript\Images\Image3.png" class="img-responsive img hide" id="ugurpic3" />

这是我的JS：

var ugur1 = document.getElementById("ugur1");
var ugur2 = document.getElementById("ugur2");
var ugur3 = document.getElementById("ugur3");

ugur1.addEventListener("click", picLink);
ugur2.addEventListener("click", picLink);
ugur3.addEventListener("click", picLink);

function picLink() {
    var picId = this.attributes["data-img"].value;
    var pic = document.getElementById(picId);
    if (pic.className === "img-responsive img hide") {
        pic.className = "img-responsive img";
    }
    else {
        pic.className = "img-responsive img hide";
    };
}

有人可以告诉我我做错了什么吗？谢谢。

Answer 1

您正在使用static content = { form { $("#form").module(FormModule) } } form.button1().click()正确选择每个a，并正确添加事件侦听器。问题是，当您选择getElementById属性时，它们不包含图像的ID。基本上，每次更改data-img到data-img="imageX"都要正确反映图片代码的ID，或更改图片代码的ID。

<强>要么

data-img="ugurpicX"

或（不是两者）：

<a data-img="ugurpic1" id="ugur1" class="btn btn-default" href="#" role="button">Toggle Image one</a>
<a data-img="ugurpic2" id="ugur2" class="btn btn-default" href="#" role="button">Toggle Image two</a>
<a data-img="ugurpic3" id="ugur3" class="btn btn-default" href="#" role="button">Toggle Image three</a>

Javascript无法识别函数中的变量

1 个答案: