javascript - 替换 Div 和重置 Div (Jquery)

Question

我有一个包含链接的 DIV。单击链接时，我希望将 div 替换为表单。当用户需要返回“主页”到原始 div 时，他们只需单击“返回”或类似按钮即可。

这是我尝试过但没有成功的方法:

HTML

<div id="wrapper" class="toggled">
  <div class="container" id="init">
    <div class="link-1">
      <a class="first" href="#">1st Action</a>
    </div>
    <div class="link-2">
      <a class="second" href="#">2nd Action</a>
    </div>
    <div class="link-3">
      <a class="third" href="#">3rd Action</a>
    </div>
  </div>
</div>


<div class="container" id="one" style="display:none;">
  <input type="button" value="Go Back" id="home"/> One
</div>

<div class="container" id="two" style="display:none;">
  <input type="button" value="Go Back" id="home"/> Two
</div>

<div class="container" id="three" style="display:none;">
  <input type="button" value="Go Back" id="home"/> Three
</div>

Javascript

var originalState = $("#init").clone();

$(".first").click(function() {
  $("#init").replaceWith($("#one"));
});

$(".second").click(function() {
  $("#init").replaceWith($("#two"));
});

$(".third").click(function() {
  $("#init").replaceWith($("#three"));
});

$("#home").click(function() {
  $(<current state>).replaceWith($(originalState));
});

我想将 div (id="init") 替换为相应的选定 div (id="one",id="two", or id="three")。

此外，用户需要在单击“返回按钮”后返回到原始 div (id="init")

这是一个Fiddle .

Answer 1

这是一个使用 javascript(没有 jQuery)的基本解决方案，希望它能帮助您解决问题。

const initDiv = document.getElementById('init');
    const classList = ["first" , "second" ,"third"];
    const inputClassList = ['one' ,'two' ,'three'];
    let linkIndex = -1;
    initDiv.addEventListener('click' , showInput);

    function showInput(e){
       
        let linkIndex = classList.indexOf(e.target.classList[0]);
        if(linkIndex >= 0){
            const inputDiv = document.getElementById(inputClassList[linkIndex]);
            const inputButton = inputDiv.children[0];
            
            inputDiv.classList.remove('noDisplay');;
            initDiv.classList.add('noDisplay');

            inputButton.addEventListener('click' ,function(){
                initDiv.classList.remove('noDisplay');
                inputDiv.classList.add('noDisplay');
            })

        }
    }

#wrapper{
background-color: #999;
}

.noDisplay{
display:none;
}

.inputCss{
/*set here the css properties you don't want the input to 
enherit from wrapper div*/
}

<div id="wrapper" class="toggled">
        <div class="container" id="init">
          <div class="link-1">
            <a class="first" href="#">1st Action</a>
          </div>
          <div class="link-2">
            <a class="second" href="#">2nd Action</a>
          </div>
          <div class="link-3">
            <a class="third" href="#">3rd Action</a>
          </div>
        </div>
        
        <div class="container noDisplay inputCss" id="one">
        <input type="button" value="Go Back" id="home1"/> One
      </div>
      
      <div class="container noDisplay inputCss" id="two">
        <input type="button" value="Go Back" id="home2"/> Two
      </div>
      
      <div class="container noDisplay inputCss" id="three">
        <input type="button" value="Go Back" id="home3"/> Three
        </div>
      </div>

此解决方案使用 jQuery。

.replaceWith()方法从 DOM 中删除内容，并通过一次调用在其位置插入新内容。所以你可以只修改css显示值。

var originalState = $("#init").clone();

$(".first").click(function() {
    toggleDisplay("init" ,"one");
    $("input").click(function() {
    toggleDisplay("one" ,"init");
    });
});

$(".second").click(function() {
    toggleDisplay("init" ,"two");
    $("input").click(function() {
    toggleDisplay("two" ,"init");
    });
});

$(".third").click(function() {
    toggleDisplay("init" ,"three");
    $("input").click(function() {
    toggleDisplay("three" ,"init");
    });
});
function toggleDisplay(first ,second) {
$(`#${first}`).hide();
$(`#${second}`).show();
}

#wrapper{
background-color: #999;
}

.inputCss{
/*set here the css properties you don't want the input to 
enherit from wrapper div*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper" class="toggled">
        <div class="container" id="init">
          <div class="link-1">
            <a class="first" href="#">1st Action</a>
          </div>
          <div class="link-2">
            <a class="second" href="#">2nd Action</a>
          </div>
          <div class="link-3">
            <a class="third" href="#">3rd Action</a>
          </div>
        </div>
     
      
      
        <div class="container inputCss" id="one" style="display:none;">
          <input type="button" value="Go Back" id="home1"/> One
        </div>

        <div class="container inputCss" id="two" style="display:none;">
          <input type="button" value="Go Back" id="home2"/> Two
        </div>

        <div class="container inputCss" id="three" style="display:none;">
          <input type="button" value="Go Back" id="home3"/> Three
          </div>
          
       </div>