为什么 this.id 在我的交换机中不起作用...箱?

Why is this.id not working in my switch...case?

提问人:r.kinder 提问时间:1/13/2022 最后编辑:r.kinder 更新时间:1/13/2022 访问量:81

问:

该代码应显示您单击的书籍封面的绘图,同时将背景更改为书籍的替代封面,但它没有执行任何操作。我有一些有效的备份代码,但我更喜欢这个解决方案。

我的js代码:

function mostraTrama(){
    try{
        switch(this.id){
            case "TramaVdR":
                nodoTramaVdR.setAttribute = ("class", "TramaScelta");
                nodoTramaPdL.setAttribute = ("class", "TramaNonScelta");
                nodoTramaG.setAttribute = ("class", "TramaNonScelta");
                document.body.style.backgroundImage = "url('../Images/way_of_kings_bg.jpg')";
                break
            case "TramaPdL":
                nodoTramaVdR.setAttribute = ("class", "TramaNonScelta");
                nodoTramaPdL.setAttribute = ("class", "TramaScelta");
                nodoTramaG.setAttribute = ("class", "TramaNonScelta");
                document.body.style.backgroundImage = "url('../Images/words_of_radiance_bg.jpg')";
                break
            case "TramaG":
                nodoTramaVdR.setAttribute = ("class", "TramaNonScelta");
                nodoTramaPdL.setAttribute = ("class", "TramaNonScelta");
                nodoTramaG.setAttribute = ("class", "TramaScelta");
                document.body.style.backgroundImage = "url('../Images/oathbringer_bg.jpg')";
                break
        }
    }
    catch(e){
        alert("mostraTrama " + e);
    }
}

function gestoreLoadRomanzi(){
    try {
        nodoTramaViaDeiRe = document.getElementById("TramaViaDeiRe");
        nodoTramaParoleDiLuce = document.getElementById("TramaParoleDiLuce");
        nodoTramaGiuramento = document.getElementById("TramaGiuramento");
        nodoTramaVdR = document.getElementById("TramaVdR");
        nodoTramaPdL = document.getElementById("TramaPdL");
        nodoTramaG = document.getElementById("TramaG");
        nodoTramaViaDeiRe.onclick = mostraTrama;
        nodoTramaParoleDiLuce.onclick = mostraTrama;
        nodoTramaGiuramento.onclick = mostraTrama;
    } catch ( e ) {
        alert("gestoreLoadRomanzi " + e);
    }
}

这三者都以 class = “TramaNonScelta” 开头,它有 display: none,当单击它们时,它们应该更改为 class = “TramaScelta”,它有 display: inline。这些 ID 都与它们在 HTML 文档中的 ID 匹配。

我的另一种功能方式是为每本书设置一个单独的功能,而不是为所有书籍设置一个单独的功能。

编辑:我还有一个非常相似的代码,用于另一个程序,而不是使用 .setAttribute,而是使用 .innerHTML 并且可以正常工作(但我的教授不希望我们在这个项目中使用 .innerHTML)

javascript html switch-statement 这个

评论

0赞 Teemu 1/13/2022
通常会发生一些事情,你有没有看过控制台,可能会有错误信息?此外,当您获得更多书籍时,维护此代码将是一场噩梦。
1赞 Sebastian Simon 1/13/2022
.setAttribute = ("class", "TramaScelta")毫无意义。再看一遍文档。请改用 classList
0赞 Lucas David Ferrero 1/13/2022
错误是什么?另外,分享你是如何调用这些函数的,因为这决定了“this”将引用什么值。
0赞 Jamiec 1/13/2022
nodoTramaVdR.setAttribute = ("class", "TramaScelta"); => nodoTramaVdR.setAttribute("class", "TramaScelta");- 尽管维护此代码的噩梦
0赞 r.kinder 1/13/2022
@Teemu控制台什么也没告诉我。至于多书的问题,这是针对一个大学项目,幸运的是,页面上只有三本书。

答: 暂无答案