单击时交换多个堆叠的div

时间：2017-03-15 09:14:14

标签： jquery ajax

现在我有两个div（问题1和问题2）并通过点击我从1到2得到的答案。但我想添加其他问题，并且还能够返回一步。我怎么能意识到这一点？我的代码现在看起来像这样：

function SwapDivsWithClick(div1, div2) {
  d1 = document.getElementById(div1);
  d2 = document.getElementById(div2);
  if (d2.style.display == "none") {
    d1.style.display = "none";
    d2.style.display = "block";
  } else {
    d1.style.display = "block";
    d2.style.display = "none";
  }
}
<div id="swapper-first" style="display:block; border:2px dashed red; padding:25px;">
  <h2>FIRST QUESTION?</h2>
  <p style="margin:0; color:red;">
    <a href="javascript:SwapDivsWithClick('swapper-first','swapper-other')">
      <button id="btn1" class="myButton" type="button" value="1.1">Answer 1</button>
    </a>
    <a href="javascript:SwapDivsWithClick('swapper-first','swapper-other')">       
      <button id="btn2" class="myButton" type="button" value="1.2">Answer 2</button>
    </a>
  </p>
</div>
<div id="swapper-other" style="display:none; border:2px dotted blue; padding:25px;">
  <h2>SECOND QUESTION?</h2>
  <p style="margin:0; color:blue;">
    <button id="btn3" class="myButton" type="button" value="2.1">Answer 1</button>
    <button id="btn4" class="myButton" type="button" value="2.2">Answer 2</button>
    <button id="btn5" class="myButton" type="button" value="2.3">Answer 3</button>
  </p>
</div>

<p style="text-align:center; font-weight:bold; font-style:italic;">
  <a href="javascript:SwapDivsWithClick('swapper-first','swapper-other')">Skip Question</a>
</p>

我看到这种方式我只能在这两个div之间交换。通过尝试添加额外的div并使这项工作，我注意到必须有一个更优雅的方式。我感谢任何帮助！

1 个答案:

答案 0 :(得分：0)

您的代码正在运行，您需要更改的内容是更改href="javascript:SwapDivsWithClick('swapper-first','swapper-other')"

到

href="javascript:" onclick="SwapDivsWithClick('swapper-first','swapper-other')"


function SwapDivsWithClick(div1, div2) {
  d1 = document.getElementById(div1);
  d2 = document.getElementById(div2);
  if (d2.style.display == "none") {
    d1.style.display = "none";
    d2.style.display = "block";
  } else {
    d1.style.display = "block";
    d2.style.display = "none";
  }
}
<div id="swapper-first" style="display:block; border:2px dashed red; padding:25px;">
  <h2>FIRST QUESTION?</h2>
  <p style="margin:0; color:red;">
    <a href="javascript:" onclick="SwapDivsWithClick('swapper-first','swapper-other')">
      <button id="btn1" class="myButton" type="button" value="1.1">Answer 1</button>
    </a>
    <a href="javascript:" onclick="SwapDivsWithClick('swapper-first','swapper-other')">       
      <button id="btn2" class="myButton" type="button" value="1.2">Answer 2</button>
    </a>
  </p>
</div>
<div id="swapper-other" style="display:none; border:2px dotted blue; padding:25px;">
  <h2>SECOND QUESTION?</h2>
  <p style="margin:0; color:blue;">
    <button id="btn3" class="myButton" type="button" value="2.1">Answer 1</button>
    <button id="btn4" class="myButton" type="button" value="2.2">Answer 2</button>
    <button id="btn5" class="myButton" type="button" value="2.3">Answer 3</button>
  </p>
</div>

<p style="text-align:center; font-weight:bold; font-style:italic;">
  <a href="javascript:" onclick="SwapDivsWithClick('swapper-first','swapper-other')">Skip Question</a>
</p>

根据你的评论更新

var QuizProgram = function() {
  var swapDivs = function($firstDiv, $secondDiv) {
      if ($firstDiv.length > 0 && $secondDiv.length > 0) {
        $firstDiv.removeClass('active').addClass('hide');
        $secondDiv.removeClass('hide').addClass('active');
      }
      disableLinks($secondDiv)
    },
    disableLinks = function($activeDiv) {
      $previousDiv = $('#questions').find('.question-wrap.active').prevAll("div.question-wrap:first");
      $nextDiv = $('#questions').find('.question-wrap.active').nextAll("div.question-wrap:first");
      if ($previousDiv.length <= 0) {
        $('#previousQuestion').addClass('disabled');
      } else {
        $('#previousQuestion').removeClass('disabled');
      }
      if ($nextDiv.length <= 0) {
        $('#nextQuestion').addClass('disabled');
      } else {
        $('#nextQuestion').removeClass('disabled');
      }
    },
    init = function() {
      $('body').on('click', '.answer-wrap', function() {
        $firstDiv = $(this).parents('.question-wrap.active');
        $secondDiv = $(this).parents('.question-wrap').nextAll("div.question-wrap:first");
        swapDivs($firstDiv, $secondDiv);
      });
      $('body').on('click', 'a.disabled', function(e) {
        e.preventDefault();
      });
      $('body').on('click', '#previousQuestion', function() {
        $firstDiv = $('#questions').find('.question-wrap.active');
        $secondDiv = $('#questions').find('.question-wrap.active').prevAll("div.question-wrap:first");
        swapDivs($firstDiv, $secondDiv)
      });
      $('body').on('click', '#nextQuestion', function() {
        $firstDiv = $('#questions').find('.question-wrap.active');
        $secondDiv = $('#questions').find('.question-wrap.active').nextAll("div.question-wrap:first");
        swapDivs($firstDiv, $secondDiv)
      });
      disableLinks($('#questions').find('.question-wrap.active'));
    }
  return init();
}
new QuizProgram();
.question-wrap {
  display: block;
  border: 2px dashed red;
  padding: 25px;
}

.active {
  display: block;
}

.hide {
  display: none;
}

.previous-next-link-wrap {
  text-align: center;
  font-weight: bold;
  font-style: italic;
}

#previousQuestion {
  float: left;
}

#nextQuestion {
  float: right
}

.disabled {
  pointer-events: none;
  color: #e1e1e1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="questions">
  <div class="question-wrap active">
    <h2>FIRST QUESTION?</h2>
    <p>
      <a class="answer-wrap">
        <button id="btn1" class="myButton" type="button" value="1.1">Answer 1</button>
      </a>
      <a class="answer-wrap">
        <button id="btn2" class="myButton" type="button" value="1.2">Answer 2</button>
      </a>
    </p>
  </div>
  <div class="question-wrap hide">
    <h2>SECOND QUESTION?</h2>
    <p>
      <a class="answer-wrap">
        <button id="btn3" class="myButton" type="button" value="2.1">Answer 1</button>
      </a>
      <a class="answer-wrap">
        <button id="btn4" class="myButton" type="button" value="2.2">Answer 2</button>
      </a>
      <a class="answer-wrap">
        <button id="btn5" class="myButton" type="button" value="2.3">Answer 3</button>
      </a>
    </p>
  </div>
  <div class="question-wrap hide">
    <h2>THIRD QUESTION?</h2>
    <p>
      <a class="answer-wrap">
        <button id="btn3" class="myButton" type="button" value="2.1">Answer 1</button>
      </a>
      <a class="answer-wrap">
        <button id="btn4" class="myButton" type="button" value="2.2">Answer 2</button>
      </a>
      <a class="answer-wrap">
        <button id="btn5" class="myButton" type="button" value="2.3">Answer 3</button>
      </a>
    </p>
  </div>
  <div class="question-wrap hide">
    <h2>FOURTH QUESTION?</h2>
    <p>
      <a class="answer-wrap">
        <button id="btn3" class="myButton" type="button" value="2.1">Answer 1</button>
      </a>
      <a class="answer-wrap">
        <button id="btn4" class="myButton" type="button" value="2.2">Answer 2</button>
      </a>
      <a class="answer-wrap">
        <button id="btn5" class="myButton" type="button" value="2.3">Answer 3</button>
      </a>
    </p>
  </div>
</div>
<p class="previous-next-link-wrap">
  <a href="javascript:" id="previousQuestion">Previous Question</a>
  <a href="javascript:" id="nextQuestion">Skip Question</a>
</p>

以更简单的方式

var QuizProgram = function() {
  var swapWithActiveDiv = function($direction) {
      $activeDiv = $('#questions').find('.question-wrap.active');
      if ($direction == "forward") {
        $alternativeDiv = $('#questions').find('.question-wrap.active').nextAll("div.question-wrap:first");
      } else {
        $alternativeDiv = $('#questions').find('.question-wrap.active').prevAll("div.question-wrap:first");
      }
      if ($activeDiv.length > 0 && $alternativeDiv.length > 0) {
        $activeDiv.removeClass('active').addClass('hide');
        $alternativeDiv.removeClass('hide').addClass('active');
      }
      disableLinks()
    },
    disableLinks = function() {
      $activeDiv = $('#questions').find('.question-wrap.active')
      $previousDiv = $('#questions').find('.question-wrap.active').prevAll("div.question-wrap:first");
      $nextDiv = $('#questions').find('.question-wrap.active').nextAll("div.question-wrap:first");
      if ($previousDiv.length <= 0) {
        $('#previousQuestion').addClass('disabled');
      } else {
        $('#previousQuestion').removeClass('disabled');
      }
      if ($nextDiv.length <= 0) {
        $('#nextQuestion').addClass('disabled');
      } else {
        $('#nextQuestion').removeClass('disabled');
      }
    },
    init = function() {
      $('body').on('click', 'a.disabled', function(e) {
        e.preventDefault();
      });
      $('body').on('click', '.answer-wrap,#previousQuestion,#nextQuestion', function(e) {
        if (e.target.id == 'previousQuestion') {
          swapWithActiveDiv("backward");
        } else {
          swapWithActiveDiv("forward")
        }
      });
      disableLinks();
    }
  return init();
}
new QuizProgram();
.question-wrap {
  display: block;
  border: 2px dashed red;
  padding: 25px;
}

.active {
  display: block;
}

.hide {
  display: none;
}

.previous-next-link-wrap {
  text-align: center;
  font-weight: bold;
  font-style: italic;
}

#previousQuestion {
  float: left;
}

#nextQuestion {
  float: right
}

.disabled {
  pointer-events: none;
  color: #e1e1e1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="questions">
  <div class="question-wrap active">
    <h2>FIRST QUESTION?</h2>
    <p>
      <a class="answer-wrap">
        <button id="btn1" class="myButton" type="button" value="1.1">Answer 1</button>
      </a>
      <a class="answer-wrap">
        <button id="btn2" class="myButton" type="button" value="1.2">Answer 2</button>
      </a>
    </p>
  </div>
  <div class="question-wrap hide">
    <h2>SECOND QUESTION?</h2>
    <p>
      <a class="answer-wrap">
        <button id="btn3" class="myButton" type="button" value="2.1">Answer 1</button>
      </a>
      <a class="answer-wrap">
        <button id="btn4" class="myButton" type="button" value="2.2">Answer 2</button>
      </a>
      <a class="answer-wrap">
        <button id="btn5" class="myButton" type="button" value="2.3">Answer 3</button>
      </a>
    </p>
  </div>
  <div class="question-wrap hide">
    <h2>THIRD QUESTION?</h2>
    <p>
      <a class="answer-wrap">
        <button id="btn3" class="myButton" type="button" value="2.1">Answer 1</button>
      </a>
      <a class="answer-wrap">
        <button id="btn4" class="myButton" type="button" value="2.2">Answer 2</button>
      </a>
      <a class="answer-wrap">
        <button id="btn5" class="myButton" type="button" value="2.3">Answer 3</button>
      </a>
    </p>
  </div>
  <div class="question-wrap hide">
    <h2>FOURTH QUESTION?</h2>
    <p>
      <a class="answer-wrap">
        <button id="btn3" class="myButton" type="button" value="2.1">Answer 1</button>
      </a>
      <a class="answer-wrap">
        <button id="btn4" class="myButton" type="button" value="2.2">Answer 2</button>
      </a>
      <a class="answer-wrap">
        <button id="btn5" class="myButton" type="button" value="2.3">Answer 3</button>
      </a>
    </p>
  </div>
</div>
<p class="previous-next-link-wrap">
  <a href="javascript:" id="previousQuestion">Previous Question</a>
  <a href="javascript:" id="nextQuestion">Skip Question</a>
</p>

相关问题
最新问题