Question

我需要一个JavaScript函数，它允许我更改一个元素的“display”属性来阻止，但是将其他元素设置为none（它们在另一个元素上面）。单击image1 = display content1，但是当您单击image2时，将content1设置为不可见并仅显示content2。

<div id="imagesContainer">
  <img id="image0" onclick="function()">
  <img id="image1" onclick="function()">
  <img id="image2" onclick="function()">
  <img id="image3" onclick="function()">
</div>
<div id="contentContainer">
  <div id="content0">Lorem Ipsum</div>
  <div id="content1">Lorem Ipsum</div>
  <div id="content2">Lorem Ipsum</div>
  <div id="content3">Lorem Ipsum</div>
</div>

Answer 1

JS

function disp(a){
    document.getElementById('content0').style.display='none';
    document.getElementById('content1').style.display='none';
    document.getElementById('content2').style.display='none';
    document.getElementById('content3').style.display='none';
    document.getElementById('content'+a).style.display='block';
}

HTML

<div id="imagesContainer">
  <img id="image0" onclick="disp(0)">
  <img id="image1" onclick="disp(1)">
  <img id="image2" onclick="disp(2)">
  <img id="image3" onclick="disp(3)">
</div>
<div id="contentContainer">
  <div id="content0">Lorem Ipsum</div>
  <div id="content1">Lorem Ipsum</div>
  <div id="content2">Lorem Ipsum</div>
  <div id="content3">Lorem Ipsum</div>
</div>

Answer 2

这是第一个答案

的一点改进

HTML

<div id="imagesContainer">
      <img id="image0" onclick="disp(0)">
      <img id="image1" onclick="disp(1)">
      <img id="image2" onclick="disp(2)">
      <img id="image3" onclick="disp(3)">
    </div>
    <div id="contentContainer">
      <div id="content0" class="co">Lorem Ipsum</div>
      <div id="content1" class="co">Lorem Ipsum</div>
      <div id="content2" class="co">Lorem Ipsum</div>
      <div id="content3" class="co">Lorem Ipsum</div>
    </div>

JS

var  content= document.getElementsByClassName('co');

for (var i = 0; i < content.length; i ++) {
    content[i].style.display = 'none';
}
function disp(a){
    document.getElementById('content'+a).style.display='block';
    for (var i = 0; i < content.length; i ++) {
        if(i!=a)
        content[i].style.display = 'none';
    }
}

Answer 3

使用forEach()的解决方案：

编辑 - 刚才意识到在原始帖子中，代码不包含问题标题所引用的类。所以这个例子错误地只适用于ID。

// Array of unique suffixes used for images and content
var availableIds = '0 1 2 3'.split( ' ' );

function showContent( imageId ) {

  var selectedId = imageId.replace( 'image', '' );

  availableIds.forEach(function _showContent_forEach( availableId ) {

    var displayBlock = selectedId === availableId;
    var contentId = 'content' + availableId;

    document.getElementById( contentId )
      .style.display = displayBlock ? 'block' : 'none';
  });
}

showContent( '0' ); // Default

img {
  width: 50px;
  height: 50px;
  border: 1px solid black;
}

<div id="imagesContainer">
  <img id="image0" onclick="showContent( this.id )">
  <img id="image1" onclick="showContent( this.id )">
  <img id="image2" onclick="showContent( this.id )">
  <img id="image3" onclick="showContent( this.id )">
</div>
<div id="contentContainer">
  <div id="content0">Lorem Ipsum 1</div>
  <div id="content1">Lorem Ipsum 2</div>
  <div id="content2">Lorem Ipsum 3</div>
  <div id="content3">Lorem Ipsum 4</div>
</div>

JavaScript - 按类隐藏所有div并按ID显示一个div

3 个答案: