JavaScript: 如何显示所有 div 直到选中一个

Question

这就是我想要实现的：如果您选择了一个选项，则只应显示这一个 div，而隐藏其他选项。

目前只有选中的 div 被隐藏，其他显示。我不明白为什么。这是我目前正在处理的代码：

    var DynDiv = new Array(1, 2, 3, 4);

    function showSelected(sapna) {
        var t = 'dyndiv' + sapna,
            r, dv;
        for (var i = 0; i < DynDiv.length; i++) {
            r = 'dyndiv' + DynDiv[i];
            dv = document.getElementById(r);
            if (dv) {
                if (t === r) {
                    dv.style.display = 'none';
                } else {
                    dv.style.display = 'block';
                }
            }
        }
        return false;
    }

<body>
<h1>Choose your flavor</h1>
    <select id="flavor" onchange="showSelected(this.value)">
        <option value="1">Sweet</option>
        <option value="2">Bitter</option>
        <option value="3">Salty</option>
        <option value="4">Umami</option>
    </select>

    <div id="dyndiv1" style="display:block;">
  <h3>Div1</h3>
  <p>Sweet Lorem Ipsum</p>
 </div>
    <div id="dyndiv2" style="display:block;">
  <h3>Div2</h3>
  <p>Bitter Lorem Ipsum</p>
 </div>
    <div id="dyndiv3" style="display:block;">
  <h3>Div3</h3>
  <p>Salty Lorem Ipsum</p>
 </div>
    <div id="dyndiv4" style="display:block;">
  <h3>Div4</h3>
  <p>Umami Lorem Ipsum</p>
 </div>
</body>

感谢您的观看！

Answer 1

你的逻辑颠倒了，因为你想隐藏其他没有被选中的东西。

 if (t === r) {
    dv.style.display = 'block';
} else {
     dv.style.display = 'none';
}

var DynDiv = new Array(1, 2, 3, 4);

    function showSelected(sapna) {
        var t = 'dyndiv' + sapna,
            r, dv;
        for (var i = 0; i < DynDiv.length; i++) {
            r = 'dyndiv' + DynDiv[i];
            dv = document.getElementById(r);
            if (dv) {
                if (t === r) {
                    dv.style.display = 'block';
                } else {
                    dv.style.display = 'none';
                }
            }
        }
        return false;
    }

<body>
<h1>Choose your flavor</h1>
    <select id="flavor" onchange="showSelected(this.value)">
        <option value="1">Sweet</option>
        <option value="2">Bitter</option>
        <option value="3">Salty</option>
        <option value="4">Umami</option>
    </select>

    <div id="dyndiv1" style="display:block;">
  <h3>Div1</h3>
  <p>Sweet Lorem Ipsum</p>
 </div>
    <div id="dyndiv2" style="display:block;">
  <h3>Div2</h3>
  <p>Bitter Lorem Ipsum</p>
 </div>
    <div id="dyndiv3" style="display:block;">
  <h3>Div3</h3>
  <p>Salty Lorem Ipsum</p>
 </div>
    <div id="dyndiv4" style="display:block;">
  <h3>Div4</h3>
  <p>Umami Lorem Ipsum</p>
 </div>
</body>

Answer 2

您输入的条件有误。

这是您代码中的更改：

if (t === r) {
    dv.style.display = 'block';
  } else {
    dv.style.display = 'none';
  }

希望对您有所帮助！

var DynDiv = new Array(1, 2, 3, 4);

function showSelected(sapna) {
  var t = 'dyndiv' + sapna,
    r, dv;
  for (var i = 0; i < DynDiv.length; i++) {
    r = 'dyndiv' + DynDiv[i];
    dv = document.getElementById(r);
    if (dv) {
      if (t === r) {
        dv.style.display = 'block';
      } else {

        dv.style.display = 'none';
      }
    }
  }
  return false;
}

<body>
  <h1>Choose your flavor</h1>
  <select id="flavor" onchange="showSelected(this.value)">
        <option value="1">Sweet</option>
        <option value="2">Bitter</option>
        <option value="3">Salty</option>
        <option value="4">Umami</option>
    </select>

  <div id="dyndiv1" style="display:block;">
    <h3>Div1</h3>
    <p>Sweet Lorem Ipsum</p>
  </div>
  <div id="dyndiv2" style="display:block;">
    <h3>Div2</h3>
    <p>Bitter Lorem Ipsum</p>
  </div>
  <div id="dyndiv3" style="display:block;">
    <h3>Div3</h3>
    <p>Salty Lorem Ipsum</p>
  </div>
  <div id="dyndiv4" style="display:block;">
    <h3>Div4</h3>
    <p>Umami Lorem Ipsum</p>
  </div>
</body>

Answer 3

尝试反转 dv.style.display = 'none';和 dv.style.display = 'block';

var DynDiv = new Array(1, 2, 3, 4);

    function showSelected(sapna) {
        var t = 'dyndiv' + sapna,
            r, dv;
        for (var i = 0; i < DynDiv.length; i++) {
            r = 'dyndiv' + DynDiv[i];
            dv = document.getElementById(r);
            if (dv) {
                if (t === r) {
                    dv.style.display = 'block';
                } else {
                    dv.style.display = 'none';
                }
            }
        }
        return false;
    }

Answer 4

你已经达到了 99%...你只是混淆了 CSS 属性

if (t === r) {
    dv.style.display = 'block';
} else {
    dv.style.display = 'none';
}

var DynDiv = new Array(1, 2, 3, 4);

function showSelected(sapna) {
  var t = 'dyndiv' + sapna,
    r, dv;
  for (var i = 0; i < DynDiv.length; i++) {
    r = 'dyndiv' + DynDiv[i];
    dv = document.getElementById(r);
    if (dv) {
      if (t === r) {
        dv.style.display = 'block';
      } else {
        dv.style.display = 'none';
      }
    }
  }
  return false;
}

<body>
  <h1>Choose your flavor</h1>
  <select id="flavor" onchange="showSelected(this.value)">
        <option value="1">Sweet</option>
        <option value="2">Bitter</option>
        <option value="3">Salty</option>
        <option value="4">Umami</option>
    </select>

  <div id="dyndiv1" style="display:block;">
    <h3>Div1</h3>
    <p>Sweet Lorem Ipsum</p>
  </div>
  <div id="dyndiv2" style="display:block;">
    <h3>Div2</h3>
    <p>Bitter Lorem Ipsum</p>
  </div>
  <div id="dyndiv3" style="display:block;">
    <h3>Div3</h3>
    <p>Salty Lorem Ipsum</p>
  </div>
  <div id="dyndiv4" style="display:block;">
    <h3>Div4</h3>
    <p>Umami Lorem Ipsum</p>
  </div>
</body>

JavaScript: 如何显示所有 div 直到选中一个

JavaScript: How to display all divs until one gets selected

javascript

show-hide