JavaScript 및 CSS를 사용하여 선택한 요소 값을 기반으로 div 표시

Question

선택한 요소에 해당 값이 있을 때 하나의 div는 표시하고 다른 div는 숨기려고 합니다.

4가지 옵션이 있는 선택 요소를 만들었는데 기본값은 비어 있고 나머지 세 가지 옵션은 아래, 위, 위입니다. 하단, 상단, 상단의 3가지 옵션 각각에 대한 콘텐츠가 포함된 3개의 숨겨진 div 요소를 아래에 배치했습니다. 선택한 요소의 값에 따라 각 div를 표시하거나 숨기고 싶습니다. 내 코드는 다음과 같습니다.

으아악 으아악 으아악

Answer 1

1. ID는 고유하며 여러 요소가 동일한 ID를 가질 수 없으므로 이렇게 변경했습니다.
2. 또한 eventListener 来根据选择隐藏和显示元素，并根据需要删除或添加 d-none 수업도 추가되었습니다.
3. 당신의 것 if/else 语句也是错误的，= 用于赋值，== 用于比较。您还可以像我的示例一样使用 switch case.

으아악 으아악 으아악

Answer 2

이벤트 리스너로 래핑하고 모든 요소를 ​​표시하기 전에 숨겨야 합니다.

으아악

이렇게 하면 사용자가 옵션을 선택할 때마다 해당 div이 표시되고 나머지는 숨겨집니다.

또한 각 if 문에 같음 비교 연산자인 = 替换为 ==，因为 javascript 中的 = 是赋值，因此如果您分配的值是真值，则 if 语句将运行。您可能正在寻找 ==를 추가해야 합니다.

전체 영상:

으아악 으아악 으아악