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替换div（id =＆＃34; init＆＃34;）（id =＆＃34; one＆＃34;，id =＆＃34; two＆＃34;，或id =＆＃34;三＆＃34;）。

此外，用户需要在点击“返回”按钮后返回原始div（id =＆＃34; init＆＃34;）

这是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>

Answer 2

此解决方案符合所有功能要求，包括浏览器历史记录支持。换句话说，按后退或前进按钮可以按预期工作。

见this fiddle。要测试历史记录控件，请在本地托管页面。完整的资料来源如下。

关键的挑战是不要超过需要更改DOM或事件绑定。替换和克隆操作很昂贵，并且具有奇怪的边缘行为。通常最好隐藏和显示元素并尽可能少地设置事件绑定。

以下解决方案可以做到这一切。如果您有疑问，请告诉我。祝你好运！

<html>
<head></head>
<body>
  <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" class="home"/> One
  </div>

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

  <div class="container" id="three" style="display:none;">
    <input type="button" value="Go Back" class="home"/> Three
  </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
(function () {
  var 
    allowList  = [ '', 'first', 'second', 'third' ],
    doDebounce = false
    ;

  $('.first').click(function( event_obj ) {
    $('#init').hide();
    $('#one').show();
    doDebounce = true;
    document.location.hash = 'first';
    event_obj.preventDefault();
  });

  $('.second').click(function( event_obj ) {
    $('#init').hide();
    $('#two').show();
    doDebounce = true;
    document.location.hash = 'second';
    event_obj.preventDefault();
  });

  $('.third').click(function( event_obj ) {
    $('#init').hide();
    $('#three').show();
    doDebounce = true;
    document.location.hash = 'third';
    event_obj.preventDefault();
  });

  $('.home').click(function( event_obj ) {
    $('.container').hide();
    $('#init').show();
    doDebounce = true;
    document.location.hash = '';
    event_obj.preventDefault();
  });

  $( window ).on( 'hashchange', function () {
    var
      page_str    = document.location.hash || '',
      selector_str = ''
      ;
    if ( page_str.length > 0 ) { page_str = page_str.substr( 1 ); }
    if ( allowList.indexOf( page_str ) === -1 ) { return; }
    if ( doDebounce ) { 
      doDebounce = false;
      return;
    }

    selector_str = page_str ? '.' + page_str : '.home';
    $( selector_str ).trigger( 'click' );
    doDebounce = false;
  });

}());
</script>
</html>

替换Div和重置Div（Jquery）

2 个答案: