Question

我有一个包含链接和内容的div。点击链接后，我希望更改链接本身和div中的内容

我有2个链接

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

我的要求是什么

1）默认情况下，应显示添加链接，同时<div id="addcontent1">内的内容应显示在<div id="answer">下。

2）当用户点击添加时，<div> id="addcontent2">内的数据应显示在<div id="answer">内，但添加链接应替换为减去链接

3）当用户点击Subtract链接时，<div id="addcontent1">内的数据应该显示在<div id="answer">内，而不是减去链接，Add链接应该回来

主要分组

<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-*属性来帮助我们完成这项工作。让我们看看下面的例子。

＆＃13;

// 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);

＆＃13;

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

＆＃13;

Answer 2

希望这是你所期待的。请随时修改或扩展此内容。

＆＃13;

$("body").on("click", "a.add", function(){
    $(this).removeClass('add').addClass('subtract').html('<h4>Subtract</h4>')
    $(this).parent().next('div').text('This section is for subtract content')
});

$("body").on("click", "a.subtract", function(){
    $(this).removeClass('subtract').addClass('add').html('<h4>Add</h4>')
    $(this).parent().next('div').text('This section is for add content')
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="change">
   <div class="col-md-2">
      <a href="#" class="add"><h4> Add </h4></a>
   </div>

   <div class="col-md-10">
       This section is for add content
   </div>
</div>

＆＃13;

Answer 3

您可以尝试此操作，只需最少的更改或原始代码

$(document).ready(function(){

    $('.change a').on('click', function(e){
        e.preventDefault();
        
        if( !$(this).hasClass('subtract') ){
        	$(this).addClass('subtract').text('Subtract');
        	$(this).parents('.change').find('div').eq(-1).text("This section is for subtract content");
        }else{
        	$(this).removeClass('subtract').text('Add');
        	$(this).parents('.change').find('div').eq(-1).text("This section is for add content");	
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="change">
   <div class="col-md-2">
      <a href="#"> Add </a>
   </div>

   <div class="col-md-10">
       This section is for add content
   </div>
</div>

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

3 个答案: