文章/答案/技术大牛

发布

社区首页 >问答首页 >JavaScript:如何在被选中之前显示所有div

问JavaScript:如何在被选中之前显示所有div
EN

Stack Overflow用户

提问于 2018-01-25 15:34:36

回答 4查看 41关注 0票数 0

这就是我想要实现的目标:如果您选择了一个选项，那么只应该显示这个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>

谢谢你看了看！

javascript

show-hide

回答 4

Stack Overflow用户

回答已采纳

发布于 2018-01-25 15:40:31

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

 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>

票数 1

Stack Overflow用户

发布于 2018-01-25 15:41:31

你把条件放错了。

--这是对代码的更改：

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>

票数 0

Stack Overflow用户

发布于 2018-01-25 15:41:48

试着倒置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;
    }

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48446555

复制

相似问题

问JavaScript:如何在被选中之前显示所有div
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript:如何在被选中之前显示所有divEN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript:如何在被选中之前显示所有div
EN