Question

我在div中有两个表单，form1在页面加载时可见，如果我单击下一个按钮，则隐藏form1并显示form2，这正在按预期工作。

现在我想要实现与上面方案相反的方法，即单击后退按钮，应该隐藏form2并显示表单1。

这是我到目前为止的javascript代码..

function switchVisible() {

  document.getElementById("disappear").innerHTML = "";

  if (document.getElementById('newpost')) {

    if (document.getElementById('newpost').style.display == 'none') {
      document.getElementById('newpost').style.display = 'block';
      document.getElementById('newpost2').style.display = 'none';
    } else {
      document.getElementById('newpost').style.display = 'none';
      document.getElementById('newpost2').style.display = 'block';
    }

  }

}

所以基本上我正在寻找一种方法来实现使用javascript并设置其显示属性的同一div中存在的两种形式的切换功能。

Answer 1

制作两个按钮元素

ChannelBufferOutputStream cbos = new ChannelBufferOutputStream(MessageBuffers.dynamicBuffer());

bmp.compress(Bitmap.CompressFormat.JPEG, 80, baos);
cbos.buffer().writeBytes(baos.toByteArray());
image.setData(cbos.buffer().copy());

cbos.buffer().clear();
imagePublisher.publish(image);

你可以使用jquery（或普通的javascript），但我个人更喜欢jquery。

<button id="next"></button>
<button id="back"></button>

（此处＆＃39; newpost＆＃39;以及＆＃39; newpost1＆＃39;是两个表单元素的ID）如果要使用普通的javascript，可以使用类似的格式。

添加此

$("#next").click(function {
    $("#newpost").hide();
    $("#newpost1").show();
});
$("#back").click(function {
    $("#newpost").show();
    $("#newpost1").hide();
});

Answer 2

使用变量stepCount然后根据count的值显示相应的表格。

如初始化stepCount为0，然后单击下一个递增1并检查条件，如果stepCount为1则显示第二个表单

同样地，如果按下后退按钮，则将stepCount减1并检查条件，如果stepCount为0则显示第一个表单

点击相应的按钮点击事件

完成所有这些操作

Answer 3

您可以使用切换功能显示隐藏div。

$('#newpost2').hide();
$("#Toggle").click(function() {
  $(this).text(function(i, v) {
    return v === 'More' ? 'Back' : 'More'
  });
  $('#newpost, #newpost2').toggle();
});

.one {
  height: 100px;
  width: 100px;
  background: #eee;
  float: left;
}

.two {
  height: 100px;
  width: 150px;
  background: #fdcb05;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='Toggle' class='pushme'>More</button>
<div class="one" id='newpost'>
  <p>Show your contain</p>
</div>
<div class="two" id='newpost2'>
  <p>Hide your contain</p>
</div>

Answer 4

按钮的这个小提琴消失了：

＆＃13;

  
  
  $("#next").click(function()
    {
        $("#next").hide();
        $("#back").show();
    });
    $("#back").click(function() {
        $("#back").show();
        $("#next").show();
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>



<input type="button" id="next" value="Next"/>
<input type="button" id="back" value="Back"/>

＆＃13;

<button class="btn btnSubmit" id="Button1" type="button" value="Click" onclick="switchVisible();">NEXT</button>

<button type="button" class="btn btnSubmit" onclick="previousVisible();" >BACK</button>

只需使用此jquery：

 function switchVisible() 
    {
      $("#newpost").hide();
      $("#newpost2").show();
    }

    function previousVisible()
    {
     $("#newpost").show();
        $("#newpost2").hide();
    }

your updated fiddle

或者您可以这样做：

 <button class="btn btnSubmit" id="Button1" type="button" value="Click" onclick="form(1);">NEXT</button>

    <button type="button" class="btn btnSubmit" onclick="form(2);" >BACK</button>


function form(a)
{
    if(a==1)
    document.getElementById("newpost").style.display="none";
    else
    document.getElementById("newpost2").style.display="block";
}

Answer 5

您还可以使用链接按钮并在此处提供特定表单的URL，并在单击后面时隐藏链接按钮，该时间仅显示“下一步”按钮。

e.g。

<a href="~/form1" style="btn-default" id="btnNext"> Next</a>
<a href="~/form2" style="btn-default" id="btnPrevious"> Previous</a>

$("#btnNext").click(function {
    $("#btnNext").hide();
    $("#btnPrevious").show();
});
$("#btnPrevious").click(function {
    $("#btnPrevious").show();
    $("#btnNext").hide();
});

如何切换显示和隐藏同一div中存在的两种形式？

5 个答案: