javascript - 单击单选按钮时，隐藏/显示 Div 不起作用

Question

您好，我的模式中有两个 div，我想在单击单选按钮时隐藏和显示它们，但它们不起作用。我正在使用 Bootstrap 按钮进行 radio 。这是我的代码:

<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="close-modal" data-dismiss="modal">
                    <div class="lr">
                        <div class="rl">
                        </div>
                    </div>
                </div>
                <div class="container">
                    <div class="row">
                        <div class="col-lg-8 offset-lg-2">
                            <div class="modal-body">
                                <!-- Project Details Go Here -->
                                <h2>Course Catalogue</h2>
                                <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>

                                ****<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="desktop" autocomplete="off" checked="checked" value="1" onclick="show1();"> Desktop
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="mobile" autocomplete="off" value="2" onclick="show2();"> Mobile
  </label>****

</div>
                                <div id="myCarousel" class="carousel slide" data-ride="carousel">
                                    <!-- Indicators -->
                                    <ol class="carousel-indicators">
                                      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                                      <li data-target="#myCarousel" data-slide-to="1"></li>
                                      <li data-target="#myCarousel" data-slide-to="2"></li>
                                      <li data-target="#myCarousel" data-slide-to="3"></li>
                                    </ol>

                                    <!-- Wrapper for slides -->
                                    <div class="carousel-inner" role="listbox">
                                      <div class="carousel-item active">
                                        <img class="img-fluid" src="img/1.png" alt="Chania">
                                      </div>

                                      <div class="carousel-item">
                                        <img class="img-fluid"  src="img/2.png" alt="Chania">
                                      </div>

                                      <div class="carousel-item">
                                        <img class="img-fluid"  src="img/3.png" alt="Flower">
                                      </div>

                                      <div class="carousel-item">
                                        <img class="img-fluid" src="img/4.png" alt="Flower">
                                      </div>
                                    </div>

                                    <!-- Left and right controls -->
                                    <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
                                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                        <span class="sr-only">Previous</span>
                                    </a>
                                    <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
                                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                        <span class="sr-only">Next</span>
                                    </a>
                                </div>

                                <div id="myCarousel2" class="carousel slide" data-ride="carousel">
                                    <!-- Indicators -->
                                    <ol class="carousel-indicators">
                                      <li data-target="#myCarousel2" data-slide-to="0" class="active"></li>
                                      <li data-target="#myCarousel2" data-slide-to="1"></li>
                                      <li data-target="#myCarousel2" data-slide-to="2"></li>
                                      <li data-target="#myCarousel2" data-slide-to="3"></li>
                                    </ol>

                                    <!-- Wrapper for slides -->
                                    <div class="carousel-inner" role="listbox">
                                      <div class="carousel-item active">
                                        <img class="img-fluid" src="bani1.png" alt="Chania">
                                      </div>

                                      <div class="carousel-item">
                                        <img class="img-fluid"  src="bani2.png" alt="Chania">
                                      </div>

                                      <div class="carousel-item">
                                        <img class="img-fluid"  src="bani1.png" alt="Flower">
                                      </div>

                                      <div class="carousel-item">
                                        <img class="img-fluid" src="bani2.png" alt="Flower">
                                      </div>
                                    </div>

                                    <!-- Left and right controls -->
                                    <a class="carousel-control-prev" href="#myCarousel2" role="button" data-slide="prev">
                                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                        <span class="sr-only">Previous</span>
                                    </a>
                                    <a class="carousel-control-next" href="#myCarousel2" role="button" data-slide="next">
                                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                        <span class="sr-only">Next</span>
                                    </a>
                                </div>




                                <p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
                                <ul class="list-inline">
                                    <li>Date: January 2017</li>
                                    <li>Client: Threads</li>
                                    <li>Category: Illustration</li>
                                </ul>
                                <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

这是javascript代码:

function show1(){
  document.getElementById('myCarousel2').style.display ='none';
  document.getElementById('myCarousel').style.display = 'block';

}
function show2(){
  document.getElementById('myCarousel2').style.display = 'block';
  document.getElementById('myCarousel').style.display ='none';
}

Answer 1

var two = document.getElementById('myCarousel2'),
    one = document.getElementById('myCarousel'),
    input1 = document.getElementById('desktop'),
    input2 = document.getElementById('mobile');
 
    input1.addEventListener('click', function() {
      two.style.display = 'none';
      one.style.display = 'block';
    })

    input2.addEventListener('click', function() {
      two.style.display = 'block';
      one.style.display = 'none';
    })
    
    function x(){
      console.log('x');
    }

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div class="col-sm-6 portfolio-item">
                    <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
                     sdgsdgsdg   
                    </a>
                    
                </div>

<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="close-modal" data-dismiss="modal">
        <div class="lr">
          <div class="rl">
          </div>
        </div>
      </div>
      <div class="container">
        <div class="row">
          <div class="col-lg-8 offset-lg-2">
            <div class="modal-body">
              <!-- Project Details Go Here -->
              <h2>Course Catalogue</h2>
              <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>

              ****
              <div class="btn-group" data-toggle="buttons">
                <label id='desktop' class="btn btn-primary active">
 <input type="radio" name="options" autocomplete="off" checked="checked" value="1"> Desktop
  </label>
                <label class="btn btn-primary" id="mobile" >
    <input type="radio" name="options"  autocomplete="off" value="2"> Mobile
  </label>****

              </div>
              <div id="myCarousel" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->CAROUSEL 1 CONTENT
                <ol class="carousel-indicators">
                  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                  <li data-target="#myCarousel" data-slide-to="1"></li>
                  <li data-target="#myCarousel" data-slide-to="2"></li>
                  <li data-target="#myCarousel" data-slide-to="3"></li>
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                  <div class="carousel-item active">
                    <img class="img-fluid" src="img/1.png" alt="Chania">
                  </div>

                  <div class="carousel-item">
                    <img class="img-fluid" src="img/2.png" alt="Chania">
                  </div>

                  <div class="carousel-item">
                    <img class="img-fluid" src="img/3.png" alt="Flower">
                  </div>

                  <div class="carousel-item">
                    <img class="img-fluid" src="img/4.png" alt="Flower">
                  </div>
                </div>

                <!-- Left and right controls -->
                <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                  <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
                  <span class="sr-only">Next</span>
                </a>
              </div>

              <div id="myCarousel2" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->CAROUSEL 2 CONTENT
                <ol class="carousel-indicators">
                  <li data-target="#myCarousel2" data-slide-to="0" class="active"></li>
                  <li data-target="#myCarousel2" data-slide-to="1"></li>
                  <li data-target="#myCarousel2" data-slide-to="2"></li>
                  <li data-target="#myCarousel2" data-slide-to="3"></li>
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                  <div class="carousel-item active">
                    <img class="img-fluid" src="bani1.png" alt="Chania">
                  </div>

                  <div class="carousel-item">
                    <img class="img-fluid" src="bani2.png" alt="Chania">
                  </div>

                  <div class="carousel-item">
                    <img class="img-fluid" src="bani1.png" alt="Flower">
                  </div>

                  <div class="carousel-item">
                    <img class="img-fluid" src="bani2.png" alt="Flower">
                  </div>
                </div>

                <!-- Left and right controls -->
                <a class="carousel-control-prev" href="#myCarousel2" role="button" data-slide="prev">
                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                  <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#myCarousel2" role="button" data-slide="next">
                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
                  <span class="sr-only">Next</span>
                </a>
              </div>




              <p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae,
                nostrum, reiciendis facere nemo!</p>
              <ul class="list-inline">
                <li>Date: January 2017</li>
                <li>Client: Threads</li>
                <li>Category: Illustration</li>
              </ul>
              <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>