Question

我让三个div互相替换并编写了这段代码，但它在x.onclick函数中调用swapdivs函数时停止了。 swapdivs（divstart，divcloud）在控制台中运行良好。我怀疑我以错误的方式传递DOM对象变量，或者某些范围问题却被卡住了：

    <h2><a href="#" id="cloudclick">Cloud Services</a></h2>
    <h2><a href="#" id="telecomclick">IT Consulting</a></h2>
    <div id="info-columns-container">
      <div id="info-column-start"> .... </div>
      <div id="info-column-cloud-services" >  .... </div>
      <div id="info-column-telecom" >  .... </div>
    </div>

  <script>

  var mydivs = document.getElementById('info-columns-container');
  var divstart = document.getElementById('info-column-start');
  var divcloud = document.getElementById('info-column-cloud-services');
  var divtelecom = document.getElementById('info-column-telecom');

  function swapdivs (divout, divin) {
    divout.parentNode.removeChild(divout);
    mydivs.appendChild(divin);
    return false;
  }

  divcloud.parentNode.removeChild(divcloud);
  divtelecom.parentNode.removeChild(divtelecom); 
  var currdiv = "start";

  document.getElementById('cloudclick').onclick = function () {
    if (currdiv == "start") {swapdivs(divstart,divcloud); currdiv = "cloud";} 
    if (currdiv == "cloud") {swapdivs(divcloud,divstart); currdiv = "start";}
    if (currdiv == "telecom") {swapdivs(divtelecom,divcloud); currdiv = "cloud";}
    return false;
  }

  document.getElementById('telecomclick').onclick = function () {
    if (currdiv == "start") {swapdivs(divstart,divtelecom); currdiv = "telecom";} 
    if (currdiv == "cloud") {swapdivs(divcloud,divtelecom); currdiv = "telecom";}
    if (currdiv == "telecom") {swapdivs(divtelecom,divstart); currdiv = "start";}
    return false;
  }


  </script>

Answer 1

您的if语句必须是if/else语句。所以，这个：

  document.getElementById('cloudclick').onclick = function () {
    if (currdiv == "start") {swapdivs(divstart,divcloud); currdiv = "cloud";} 
    if (currdiv == "cloud") {swapdivs(divcloud,divstart); currdiv = "start";}
    if (currdiv == "telecom") {swapdivs(divtelecom,divcloud); currdiv = "cloud";}
    return false;
  }

应该是：

  document.getElementById('cloudclick').onclick = function () {
    if (currdiv == "start") {swapdivs(divstart,divcloud); currdiv = "cloud";} 
    else if (currdiv == "cloud") {swapdivs(divcloud,divstart); currdiv = "start";}
    else if (currdiv == "telecom") {swapdivs(divtelecom,divcloud); currdiv = "cloud";}
    return false;
  }

问题是，如果您的第一个if语句执行，那么它会更改currdiv的值，然后导致下一个if语句也会触发，我认为不是你想要什么，因为它颠倒了之前的陈述所做的事情。对if/else的更改将确保只有一个条件一次执行。

通过函数参数传递DOM对象

1 个答案: