Question

嗨我的模态中有两个div，我想在单击按钮时隐藏并显示它们，但它们不起作用。我正在使用Bootstrap按钮收音机。这是我的代码：

<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

由于您使用的是Bootstrap，因此您也使用了jQuery。试试这个：

function show1(){
  $('#myCarousel, #myCarousel2').toggle();
}

function show2(){
  $('#myCarousel, #myCarousel2').toggle();
}

如果默认情况下隐藏其中一个轮播，

.toggle()将只按您想要的方式工作。否则你可以使用：

function show1(){
  $('#myCarousel2').hide();
  $('#myCarousel').show();
}

function show2(){
  $('#myCarousel2').show();
  $('#myCarousel').hide();
}

此外，由于默认情况下隐藏了模态，因此会产生很多问题。

尝试按以下方式调用函数：

$(document).on("click", "#desktop", function() {
  $('#myCarousel2').hide();
  $('#myCarousel').show();
});

$(document).on("click", "#mobile", function() {
  $('#myCarousel2').show();
  $('#myCarousel').hide();
});

Answer 2

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>

Answer 3

尝试为您的单选按钮设置ID并绑定点击事件：

 window.onload = function() {
    var radio1 = document.getElementById('radio1');
    radio1.onclick = function() {
        document.getElementById('myCarousel2').style.display ='none';
        document.getElementById('myCarousel').style.display = 'block';
    }
    //...
 }

单选按钮单击，隐藏/显示不工作分区

3 个答案: