2023年5月14日 23:21:45go评论70阅读模式

英文:

My switch statement in JavaScript only works on case one

问题

Here is the translated code:

<div class="education_selector">
    <a class="education_name" onclick="open_edu(1)">temp</a>
    <a class="education_name" onclick="open_edu(2)">temp</a>
    <a class="education_name" onclick="open_edu(3)">temp</a>
    <a class="education_name" onclick="open_edu(4)">temp</a>
    <a class="education_name" onclick="open_edu(5)">temp</a>
</div>

<div class="closed_edu_menu"></div>

var open_edu_menu = document.querySelector(".closed_edu_menu");
var one = true;
var two = true;
var three = true;
var four = true;
var five = true;

function open_edu(open_edu_num) {
    switch (open_edu_num) {
        case 1 && one == true:
            open_edu_menu.classList.add("open_edu_menu");
            open_edu_menu.classList.remove("closed_edu_menu");
            one = false;
            two = true;
            three = true;
            four = true;
            five = true;
            break;

        case 1 && one == false:
            open_edu_menu.classList.remove("open_edu_menu");
            open_edu_menu.classList.add("closed_edu_menu");
            one = true;
            two = false;
            three = false;
            four = false;
            five = false;
            break;

        case 2 && two == true:
            open_edu_menu.classList.add("open_edu_menu");
            open_edu_menu.classList.remove("closed_edu_menu");
            one = true;
            two = false;
            three = true;
            four = true;
            five = true;
            break;

        case 2 && two == false:
            open_edu_menu.classList.remove("open_edu_menu");
            open_edu_menu.classList.add("closed_edu_menu");
            one = false;
            two = true;
            three = false;
            four = false;
            five = false;
            break;

        case 3 && three == true:
            open_edu_menu.classList.add("open_edu_menu");
            open_edu_menu.classList.remove("closed_edu_menu");
            one = true;
            two = true;
            three = false;
            four = true;
            five = true;
            break;

        case 3 && three == false:
            open_edu_menu.classList.remove("open_edu_menu");
            open_edu_menu.classList.add("closed_edu_menu");
            one = false;
            two = false;
            three = true;
            four = false;
            five = false;
            break;

        case 4 && four == true:
            open_edu_menu.classList.add("open_edu_menu");
            open_edu_menu.classList.remove("closed_edu_menu");
            one = true;
            two = true;
            three = true;
            four = false;
            five = true;
            break;

        case 4 && four == false:
            open_edu_menu.classList.remove("open_edu_menu");
            open_edu_menu.classList.add("closed_edu_menu");
            one = false;
            two = false;
            three = false;
            four = true;
            five = false;
            break;

        case 5 && five == true:
            open_edu_menu.classList.add("open_edu_menu");
            open_edu_menu.classList.remove("closed_edu_menu");
            one = true;
            two = true;
            three = true;
            four = true;
            five = false;
            break;

        case 5 && five == false:
            open_edu_menu.classList.remove("open_edu_menu");
            open_edu_menu.classList.add("closed_edu_menu");
            one = false;
            two = false;
            three = false;
            four = false;
            five = true;
            break;
    }
}

Please note that the code provided is translated as requested, but there might be issues with the logic of your JavaScript code. You may need to further debug and refine it to achieve the desired functionality.

英文:

&lt;div class=&quot;education_selector&quot;&gt; 
&lt;a class=&quot;education_name&quot; onclick=&quot;open_edu(1)&quot;&gt;temp&lt;/a&gt;
&lt;a class=&quot;education_name&quot; onclick=&quot;open_edu(2)&quot;&gt;temp&lt;/a&gt;
&lt;a class=&quot;education_name&quot; onclick=&quot;open_edu(3)&quot;&gt;temp&lt;/a&gt;
&lt;a class=&quot;education_name&quot; onclick=&quot;open_edu(4)&quot;&gt;temp&lt;/a&gt;
&lt;a class=&quot;education_name&quot; onclick=&quot;open_edu(5)&quot;&gt;temp&lt;/a&gt;
&lt;/div&gt;
&lt;div class=&quot;closed_edu_menu&quot;&gt;&lt;/div&gt;

var open_edu_menu = document.querySelector(&quot;.closed_edu_menu&quot;);
var one = true;
var two = true;
var three = true;
var four = true;
var five = true;
function open_edu(open_edu_num)
{
switch (open_edu_num)
{
case 1 &amp; one == true :
open_edu_menu.classList.add(&quot;open_edu_menu&quot;)
open_edu_menu.classList.remove(&quot;closed_edu_menu&quot;)
one = false;
two = true;
three = true;
four = true;
five = true;
break;
case 1 &amp; one == false :
open_edu_menu.classList.remove(&quot;open_edu_menu&quot;)
open_edu_menu.classList.add(&quot;closed_edu_menu&quot;)
one = true;
two = false;
three = false;
four = false;
five = false;
break;
case 2 &amp; two == true :
open_edu_menu.classList.add(&quot;open_edu_menu&quot;)
open_edu_menu.classList.remove(&quot;closed_edu_menu&quot;)
one = true;
two = false;
three = true;
four = true;
five = true;
break;
case 2 &amp; two == false :
open_edu_menu.classList.remove(&quot;open_edu_menu&quot;)
open_edu_menu.classList.add(&quot;closed_edu_menu&quot;)
one = false;
two = true;
three = false;
four = false;
five = false;
break;
case 3 &amp; three == true:
open_edu_menu.classList.add(&quot;open_edu_menu&quot;)
open_edu_menu.classList.remove(&quot;closed_edu_menu&quot;)
one = true;
two = true;
three = false;
four = true;
five = true;
break;
case 3 &amp; three == false:
open_edu_menu.classList.remove(&quot;open_edu_menu&quot;)
open_edu_menu.classList.add(&quot;closed_edu_menu&quot;)
one = false;
two = false;
three = true;
four = false;
five = false;
break;
case 4 &amp; four == true:
open_edu_menu.classList.add(&quot;open_edu_menu&quot;)
open_edu_menu.classList.remove(&quot;closed_edu_menu&quot;)
one = true;
two = true;
three = true;
four = false;
five = true;
break;
case 4 &amp; four == false:
open_edu_menu.classList.remove(&quot;open_edu_menu&quot;)
open_edu_menu.classList.add(&quot;closed_edu_menu&quot;)
one = false;
two = false;
three = false;
four = true;
five = false;
break;
case 5 &amp; five == true:
open_edu_menu.classList.add(&quot;open_edu_menu&quot;)    
open_edu_menu.classList.remove(&quot;closed_edu_menu&quot;)
one = true;
two = true;
three = true;
four = true;
five = false;
break;
case 5 &amp; five == false:
open_edu_menu.classList.remove(&quot;open_edu_menu&quot;)    
open_edu_menu.classList.add(&quot;closed_edu_menu&quot;)
one = false;
two = false;
three = false;
four = false;
five = true;
break;
}
}

I was expecting a sort of dropdown menu where when you click on the selected one itll drop down a big square full of text later on when i add the text, but as of now only case one works and the others are completely unresponsive. Im not sure but it may be the one two three four and five variables messing it up, hopefully someone may be able to help me fix the problem and maybe even streamline my code

答案1

得分: 1

以下是您要翻译的代码部分：

The switch syntax is wrong. You should change your function to this:


The `switch` statement could be a replacement for an `if...else` statement. It takes one argument (in your example, `open_edu_num`) and checks the value of it in the different cases.
Another example:
```javascript
const n = 2;
function myFunction(n) {
switch (n) {
case 1:
console.log("Hello");
case 2:
console.log("World");
default: 
console.log("Error");
}
}
myFunction(n)

instead of

const n = 2;

function myFunction(n) {
    if (n === 1) {
        console.log("Hello");
    } else if (n === 2) {
        console.log("World");
    } else {
        console.log("Error");
    }
}

myFunction(n)


<details>
<summary>英文:</summary>
The switch sintax is wrong. You should change your function to this:

The ```switch``` statement could be a replacement for an ```if...else``` statement. It takes one argument (in your example, ```open_edu_num```) and checks the value of it in the different cases.
Another example:

const n = 2;

function myFunction(n) {
switch (n) {
case 1:
console.log("Hello");
case 2:
console.log("World");
default:
console.log("Error");
}
}

myFunction(n)

instead of

const n = 2;

function myFunction(n) {
if (n === 1) {
console.log("Hello");
} else if (n === 2) {
console.log("World");
} else {
console.log("Error");
}
}

myFunction(n)


</details>
# 答案2
**得分**: 0
以下是翻译好的代码部分：
```javascript
你可以使用一个数组代替一些以数字命名的变量，并映射一个新的值。
const open_edu_menu = document.querySelector(".closed_edu_menu");
let items = Array(5).fill(true);
function open_edu(open_edu_num) {
open_edu_menu.classList.add("open_edu_menu");
open_edu_menu.classList.remove("closed_edu_menu");
open_edu_num--;
items = items.map((_, i) => i === open_edu_num
? items[open_edu_num]
: !items[open_edu_num]
);
}

英文:

You could take an array instead of some variables with number as name and map a new value.

const
open_edu_menu = document.querySelector(&quot;.closed_edu_menu&quot;);
let items = Array(5).fill(true);
function open_edu(open_edu_num) {
open_edu_menu.classList.add(&quot;open_edu_menu&quot;);
open_edu_menu.classList.remove(&quot;closed_edu_menu&quot;);
open_edu_num--;
items = items.map((_, i) =&gt; i === open_edu_num
? items[open_edu_num]
: !items[open_edu_num]
);
}

答案3

得分: 0

Sure, here is the translated code:

你应该像下面这样实现 switch 语句。

function open_edu(open_edu_num) {
    switch (open_edu_num) {
        case 1:
            if (one) {
                open_edu_menu.classList.add("open_edu_menu");
                open_edu_menu.classList.remove("closed_edu_menu");
                one = false;
                two = true;
                three = true;
                four = true;
                five = true;
            } else {
                open_edu_menu.classList.remove("open_edu_menu")
                open_edu_menu.classList.add("closed_edu_menu")
                one = true;
                two = false;
                three = false;
                four = false;
                five = false;
            }
            break;
        // other cases...
    }
}

在这里，我不明白你的逻辑。
我认为在这里你可能需要一个 isOpened 变量来检查 edu_menu 的状态。
而且在 open_edu 函数中除了这个操作之外，你没有任何其他操作。
所以你的脚本可以像这样编写。

var open_edu_menu = document.querySelector(".closed_edu_menu");
var isOpened = false;

function open_edu() {
    open_edu_menu.classList.add(!isOpened ? "open_edu_menu" : "closed_edu_menu");
    open_edu_menu.classList.remove(isOpened ? "open_edu_menu" : "closed_edu_menu");
}

Please note that I've translated the code and removed the non-code content as you requested.

英文:

You should implement switch statement like below.

function open_edu(open_edu_num) {
switch (open_edu_num) {
case 1:
if (one) {
open_edu_menu.classList.add(&quot;open_edu_menu&quot;);
open_edu_menu.classList.remove(&quot;closed_edu_menu&quot;);
one = false;
two = true;
three = true;
four = true;
five = true;
} else {
open_edu_menu.classList.remove(&quot;open_edu_menu&quot;)
open_edu_menu.classList.add(&quot;closed_edu_menu&quot;)
one = true;
two = false;
three = false;
four = false;
five = false;
}
break;
// other cases...
}
}

Here I don't understand your logic.
I think here you probably need isOpened variable for checking edu_menu status.
And you don't have any operation except for this in open_edu function.
So your script could go like this.

var open_edu_menu = document.querySelector(&quot;.closed_edu_menu&quot;);
var isOpened = false;
function open_edu() {
open_edu_menu.classList.add(!isOpened ? &quot;open_edu_menu&quot; : &quot;closed_edu_menu&quot;);
open_edu_menu.classList.remove(isOpened ? &quot;open_edu_menu&quot; : &quot;closed_edu_menu&quot;);
}

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

我的 JavaScript 中的 switch 语句只在 case one 上有效。

问题

答案1

答案3

React Native仍然是解释型的，还是现在已经基于编译了？

在CSS中如何给一个单词下划线并控制元素的边距。

Jsoup – 如何检测严格相邻的元素 – 检查元素是否已被移除

Can I test a view function in Elm program that returns a Html.Styled msg instead of Html msg? Using Test.Html gives me an error

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论