javascript - 单击链接时无法更改 div 的内容

Question

我有一个带有链接和内容的 div。单击链接时，我希望更改链接本身以及该 div 内的内容

我有 2 个链接

<a href="#" class="add1> Add </a>
<a href="#" class="add2> Subtract </a>

我的要求是

1) By default the Add link should get displayed and along with it the content inside <div id="addcontent1"> should get displayed under <div id="answer">.

2) When a user clicks on Add the data inside the <div> id="addcontent2"> should get displayed inside <div id="answer">, but the Add link should get replaced by subtract link

3) When the user clicks on Subtract link the data inside <div id="addcontent1"> should get displayed back inside <div id="answer"> and in place of subtract link the Add link should come back

主分区

<div class="change">
    <div class="col-md-2">
        <a href="#" class="add1> Add </a>
    </div>

    <div class="col-md-10">
        <div id="answer">Data will appear here when one of the tabs above is clicked</div>
    </div>
</div>

需要替换的内容

<div id="addcontent1">
    Random text will appear here
</div> 

<div id="addcontent2">
    <form action="action_page.php">
        <input type="text" name="name" >    
        <input type="submit" value="Submit">
    </form>
</div>  

Answer 1

这似乎是一种切换事件。创建a元素的内容都是减去和添加，然后切换它们。其次，创建内容对象并将它们存储在内容列表中。之后，您还必须创建 2 个函数来切换链接和内容，以用于单击链接和特定内容。我们可以使用data-*属性来帮助我们做到这一点。让我们看看下面的例子。

// Create an Array list for storing different contents.
var contentList = [];

// The contents are within attribute 'data-of-sn' which are corresponding to the attribute 'data-sn' of links. Also you can see the children have class 'click-toggle' mean you are able to toggle just like links do.
var content1 = $(
  '<div class="add-content" data-of-sn="2">' +
    '<form action="action_page.php">' +
      '<input type="text" name="name" placeholder="Can Not Toggle">' +
      '<input class="click-toggle" type="submit" value="Can Toggle">' +
    '</form>' +
  '</div>'
);

var content2 = $(
  '<div class="add-content" data-of-sn="1">' +
    '<p>Can Not Toggle</p>' +
    '<button class="click-toggle">Can Toggle</button>' +
  '</div>'
);

// Toggle link element.
function toggleLink() {
  $('.add').toggle();
}

// Toggle content by serial number.
function toggleContent(sn) {
  // The correspond index of content Array.
  var index = sn - 1;

  // Remove current content in div#answer.
  $('#answer > div').remove();

  // Append new content in div#answer.
  $('#answer').append(contentList[index]);

  // Bind click event by any element has class 'click-toggle'.
  $('.click-toggle').on('click', bindClickEvent);
}

// Bind event function.
function bindClickEvent(e) {
  // Prevent default behavior of HTML element, e.g. submit button which send form and reload page.
  e.preventDefault();

  // Get attribute 'data-of-sn' of the parent whose class name includes 'add-content'.
  var sn = $(this).parents('.add-content').eq(0).attr('data-of-sn');

  // Execute toggleLink function;
  toggleLink();

  // Execute toggleContent function by serial number of target.
  toggleContent(sn);
};

// Put the contents in the Array list.
contentList.push(content1);
contentList.push(content2);

// Bind click event with a callback function.
$('.add').on('click', function(e){
  e.preventDefault();
  var sn = $(this).attr('data-sn');
  toggleLink();
  toggleContent(sn);
});

// Show default content.
toggleContent(2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="change">
  <div class="col-md-2">
    <a href="#" class="add" data-sn="1">
      <h4>Add</h4>
    </a>
    <a href="#" class="add" data-sn="2" style="display:none;">
      <h4>Subtract</h4>
    </a>
  </div>

  <div class="col-md-10">
    <div class="new_member_box_display" id="answer">  </div>
  </div>
</div>