Question

在给定的示例中，我想要#rightdiv的是#rightdivOne最初应显示在#rightdiv和#rightdivTwo或#rightdivThree中不显示，然后点击submit按钮，#rightdivTwo应显示在#rightdivOne的位置（以便#rightdivOne不再可见），并且再次单击submit按钮，#rightdivThree将显示在同一位置。

页面的其余部分应保持静止。

是否可以通过Javascript执行此操作？我无法使用AJAX。此外，我不喜欢使用JQuery，只会将它作为最后的手段。如果可以，有人可以指导我一些方法吗？

JSFiddle here.

<div id="leftrightdiv" style="width:380px; padding-left:10px; padding-right:10px; background-color:grey; height:400px;">
    <div id="leftdiv" style="width:190px; float:left; overflow:auto; background-color:#7bbe7b; height:400px;"></div>

    <div id="rightdiv" style="width:190px; float:right;  overflow:auto; background-color:#87ccd1; height:400px;">
        <div id="rightdivOne" style="width:100%; float:right; background-color:#25dcea; height:400px;">
            <p>I am the statement of the question. I am the statement of the question. I am the statement of the question. I am the statement of the question. </p>
            <div><input type="radio" name="radiorightdivTwo" value="Option One">
            <label>Option One</label></div>
            <div><input type="radio" name="radiorightdivTwo" value="Option Two">
            <label>Option Two</label></div>
            <div><input type="radio" name="radiorightdivTwo" value="Option Three">
            <label>Option Three</label></div>
            <div><input type="radio" name="radiorightdivTwo" value="Option Four">
            <label>Option Four</label></div>
            <span style="float:right; margin:50px;"><input type="submit" value="Submit"></span>
        </div>
        <div id="rightdivTwo" style="width:100%; float:right; background-color:#d1879b; height:400px;">
            <p>I am the statement of the question. I am the statement of the question. I am the statement of the question. I am the statement of the question. </p>
            <div><input type="radio" name="radiorightdivTwo" value="Option One">
            <label>Option One</label></div>
            <div><input type="radio" name="radiorightdivTwo" value="Option Two">
            <label>Option Two</label></div>
            <div><input type="radio" name="radiorightdivTwo" value="Option Three">
            <label>Option Three</label></div>
            <div><input type="radio" name="radiorightdivTwo" value="Option Four">
            <label>Option Four</label></div>
            <span style="float:right; margin:50px;"><input type="submit" value="Submit"></span>
        </div>
        <div id="rightdivThree" style="width:100%; float:right; background-color:#8f63f2; height:400px;">
            <p>I am the statement of the question. I am the statement of the question. I am the statement of the question. I am the statement of the question. </p>
            <div><input type="radio" name="radiorightdivTwo" value="Option One">
            <label>Option One</label></div>
            <div><input type="radio" name="radiorightdivTwo" value="Option Two">
            <label>Option Two</label></div>
            <div><input type="radio" name="radiorightdivTwo" value="Option Three">
            <label>Option Three</label></div>
            <div><input type="radio" name="radiorightdivTwo" value="Option Four">
            <label>Option Four</label></div>
            <span style="float:right; margin:50px;"><input type="submit" value="Submit"></span>
        </div>
    </div>  
</div>

注意： - 我使用内联CSS是有原因的。所以请不要让我这么做。

Answer 1

我刚刚创建了一个可以使用的Fiddle：

 $("input[type='submit']").click(function () {
  if ($("#rightdivOne").is(':visible')) {
    $("#rightdivOne").fadeOut('fast', function () {
        $('#rightdivTwo').fadeIn('fast');
    });
   }
   else
   {
    $("#rightdivTwo").fadeOut('fast', function () {
        $('#rightdivThree').fadeIn('fast');

    });
 }
});

我想在下一步中你想要检查使用单选按钮选择了哪个div，并在单击提交时更改为所选的div。现在，这只是将当前div替换为下一个请求，作为您可以开始的示例。虽然你提到你更喜欢纯Javascript解决方案和jQuery作为最后一个选项 - 它只是用jQuery更快完成，我可以在Javascript中添加相同的。我注意到在测试js之前应该显示的div具有相同的副本，我只是将第1，第2和第3添加到html（仅调整），但颜色的变化可能足以指示div被取代。

Answer 2

您可以使用简单的vanilla js完成此操作，甚至可以内联您的onclick事件（除非您想为每个提交按钮添加唯一ID，然后您可以使用事件侦听器）：demo

// here is the javascript function to change elements
function nextPg(oldpage, newpage) {
     document.getElementById(oldpage).style.display = "none";
     document.getElementById(newpage).style.display = "block";
}

// add the following to the submit button html
<input type="submit" value="Submit" onclick="nextPg('rightdivOne','rightdivTwo');">

// and lastly, each subsequent 'page' needs to start out with 'display: none;' style
<div id="rightdivTwo" style="width:100%; float:right; background-color:#d1879b; height:400px; display: none;">

Javascript：如何在点击按钮时在另一个div的位置显示div？

2 个答案: