0

複数の所有者を追加できるセクションがあるフォームがあります。リンクに大きなブロックが表示され、別の大きなコードブロックを追加するリンクが追加されるようにしようとしています。コードのセクションの 1 つを削除するためのリンクも必要です。

これがどのように見えるかであり、さらに2回まで複製しようとしています。

私が書いたjQueryは、リンクのオンとオフを切り替えるだけです。コードの一部 (以下に示す) を複製し、メソッドで非表示にする必要があるまでそこに保持できるリンクが必要です。

ここに画像の説明を入力

ここにhtmlがあります

<div id="principalOwner2">
<h4>Owner 3</h4> 
<div id="fol_reg_row">

  <div id="fol_reg_left">
    <label for="principalOwnerName3" class="block label">Name:*</label><br />
    <input name="principalOwnerName3" id="principalOwnerName3" class="fol_reg_textfield" value="[% params.principalOwnerName3 %]" type="text" />
  </div>

  <div id="fol_reg_right">
    <label for="principalOwnerTitle3" class="block label">Title:*</label><br />
    <input name="principalOwnerTitle3" id="principalOwnerTitle3" class="fol_reg_textfield" value="[% params.principalOwnerTitle3 %]" type="text" />
  </div>

</div>

<div id="fol_reg_row">

  <div id="fol_reg_left">
    <label for="principalOwnerEmail3" class="block label">Email:*</label><br />
  <input name="principalOwnerEmail3" id="principalOwnerEmail3" class="fol_reg_textfield" value="[% params.principalOwnerEmail3 %]" type="text" />
  </div>

  <div id="fol_reg_right">
    <label for="principalOwnerGender3" class="block label">Gender:*</label><br />
      <select name="principalOwnerGender3" id="principalOwnerGender3" type="text" class="fpp_select">
      <option selected="selected" value="">Select a Gender</option>
      <option>Male</option>
      <option>Female</option>
    </select>
  </div>

</div>

<div id="fol_reg_row">

  <div id="fol_reg_left">
    <label for="principalOwnerEthnicity3" class="block label">Owner Ethnicity:*</label><br />
      <select name="principalOwnerEthnicity3" id="principalOwnerEthnicity3" type="text" class="fpp_select">
        <option selected="selected" value="">Select an Ethnicity</option>
        <option>African American</option>
        <option>Asian-Indian</option>
        <option>Asian-Pacific</option>
        <option>Hispanic American</option>
      </select>
  </div>

  <div id="fol_reg_right">
    <label for="principalOwnerOwnership3" class="block label">% Ownership:*</label><br />
    <input name="principalOwnerOwnership3" id="principalOwnerOwnership3" class="fol_reg_textfield" value="[% params.principalOwnerOwnership3 %]" type="text" />
  </div>

  </div>
</div>

これは私が試したjqueryです 

$.fn.addRemoveOwners = function(phrase,count) {
  var i = 2 ;
  var phrase;
  if (i == 2) {
    phrase = 'second';
  } 
  if (i == 3) {
   phrase = 'third'
  }  
  $("#addOwner_p").append('<a href="#" id="add_owner" style="font-size:13px;">Add a '+phrase+' owner</a>');

// shows/removes additional owners 
$("#add_owner").live('click', function(){
   $("#addOwner_p").remove();
   $("#principalOwner2").toggle('slideDown');
   $("#addOwner_p").append('<a href="#" id="add_owner" style="font-size:13px;">Add a '+phrase+' owner</a>');
  $("#mailingAddress").focus();

  i++;
  return false;
 });      
};

このようなコード ブロックを追加および削除するには、どのように JS を作成すればよいでしょうか。

4

0 に答える 0