Question

这就是我想要实现的目标：如果您选择一个选项，则只显示此单个div，而隐藏其他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 =＆＃39; none＆＃39 ;;和dv.style.display =＆＃39;阻止＆＃39;;

＆＃13;

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;
    }

＆＃13;

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，直到选中一个

4 个答案: