1

jQuery, Javascript初心者なので質問させて頂きます。
タブ切り替え要素のinput, textareaの要素を一度に取得して確定を押した後にappendに入力したいと思いますがうまくいきません。

他の記述方法やシンプルに書き換えることが可能でしたらご指導頂ければと思います。

function saveField(obj) {
  var thisId = obj.parentNode.parentNode.parentNode.id;
  var AAInputValue = $('div[thisId]').children('#AA').find('input').val();
  var AATextValue = $('div[thisId]').children('#AA').find('textarea').val();
  var BBInputValue = $('div[thisId]').children('#BB').find('input').val();
  var BBTextValue = $('div[thisId]').children('#BB').find('textarea').val();
  var CCInputValue = $('div[thisId]').children('#CC').find('input').val();
  var CCTextValue = $('div[thisId]').children('#CC').find('textarea').val();
  var DDInputValue = $('div[thisId]').children('#DD').find('input').val();
  var DDTextValue = $('div[thisId]').children('#DD').find('textarea').val();
  var EEInputValue = $('div[thisId]').children('#EE').find('input').val();
  var EETextValue = $('div[thisId]').children('#EE').find('textarea').val();

  var headingOutputAA = document.createElement('h3');
  headingOutput.innerText = AAInputValue;

  var contentOutputAA = document.createElement('p');
  contentOutput.innerText = AATextValue;

  var headingOutputBB = document.createElement('h3');
  headingOutput.innerText = BBInputValue;

  var contentOutputBB = document.createElement('p');
  contentOutput.innerText = BBTextValue;

  var headingOutputCC = document.createElement('h3');
  headingOutput.innerText = CCInputValue;

  var contentOutputCC = document.createElement('p');
  contentOutput.innerText = CCATextValue;

  var headingOutputDD = document.createElement('h3');
  headingOutput.innerText = DDInputValue;

  var contentOutputDD = document.createElement('p');
  contentOutput.innerText = DDTextValue;

  var headingOutputEE = document.createElement('h3');
  headingOutput.innerText = EEInputValue;

  var contentOutputEE = document.createElement('p');
  contentOutput.innerText = EETextValue;

  var outputOuter = document.createElement('div');
  outputOuter.appendChild(headingOutputAA);
  outputOuter.appendChild(contentOutputAA);
  outputOuter.appendChild(headingOutputBB);
  outputOuter.appendChild(contentOutputBB);
  outputOuter.appendChild(headingOutputCC);
  outputOuter.appendChild(contentOutputCC);
  outputOuter.appendChild(headingOutputDD);
  outputOuter.appendChild(contentOutputDD);
  outputOuter.appendChild(headingOutputEE);
  outputOuter.appendChild(contentOutputEE);

  var child_object = document.getElementById('field');
  child_object.appendChild(outputOuter);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<ul class="nav nav-pills" role="tablitst">
  <li class="active">
    <a href="#a" aria-controls="a" role="tab" data-toggle="tab">A</a>
  </li>
  <li>
    <a href="#b" aria-controls="b" role="tab" data-toggle="tab">B</a>
  </li>
  <li>
    <a href="#c" aria-controls="c" role="tab" data-toggle="tab">C</a>
  </li>
  <li>
    <a href="#d" aria-controls="d" role="tab" data-toggle="tab">D</a>
  </li>
  <li>
    <a href="#e" aria-controls="e" role="tab" data-toggle="tab">E</a>
  </li>
</ul>

<div class="tab-content" id="field">
  <div role="tabpanel" class="tab-pane active" id="a">
    <div id="AA">
      <div class="free-text">
        <h4>
          aaaa
        </h4>
        <input name="heading" type="text" rows="5" cols="80">
        <h5>
          bbbb
        </h5>
        <textarea name="content" id="" cols="80" rows="5"></textarea>
      </div>
    </div>
  </div>
  <div role="tabpanel" class="tab-pane" id="b">
    <div id="BB">
      <!-- free text -->
      <div class="free-text">
        <h4>
          cccc
        </h4>
        <input name="heading" type="text" rows="5" cols="80">
        <h5>
          dddd
        </h5>
        <textarea name="content" id="" cols="80" rows="5"></textarea>
      </div>
    </div>
  </div>
  <div role="tabpanel" class="tab-pane" id="c">
    <div id="CC">
      <div class="free-text">
        <h4>
          eeee
        </h4>
        <input name="heading" type="text" rows="5" cols="80">
        <h5>
          ffff
        </h5>
        <textarea name="content" id="" cols="80" rows="5"></textarea>
      </div>
    </div>
  </div>
  <div role="tabpanel" class="tab-pane" id="d">
    <div id="DD">
      <div class="free-text">
        <h4>
          gggg
        </h4>
        <input name="heading" type="text" rows="5" cols="80">
        <h5>
         hhhh
        </h5>
        <textarea name="content" id="" cols="80" rows="5"></textarea>
      </div>
    </div>
  </div>
  <div role="tabpanel" class="tab-pane" id="e">
    <div id="FF">
      <div class="free-text">
        <h4>
          iiii
        </h4>
        <input name="heading" type="text" rows="5" cols="80">
        <h5>
          jjjj
        </h5>
        <textarea name="content" id="" cols="80" rows="5"></textarea>
      </div>
    </div>
  </div>
  <ul class="list-inline">
    <li><a href="#">キャンセル</a>
    </li>
    <li><a href="#" onclick="saveField(this);">確定</a>
  </ul>
</div>

2 件の回答 2

1

jQueryではクリックイベント等のイベント駆動はon()を使って書きます。
これで動きました。

各々の要素にはeach()で順次アクセスします。

$(document).ready(function(){

  $(document).on('click', '#saveField', function(e){
    
    var tab = $(this).parents('.tab-content');

    tab.find('.tab-pane').each(function(index, element){
      tab.append($('<h3>').text($(element).find('input').val()));
      tab.append($('<p>').text($(element).find('textarea').val()));
    });
  });

});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<ul class="nav nav-pills" role="tablitst">
  <li class="active"><a href="#a" aria-controls="a" role="tab" data-toggle="tab">A</a></li>
  <li><a href="#b" aria-controls="b" role="tab" data-toggle="tab">B</a></li>
  <li><a href="#c" aria-controls="c" role="tab" data-toggle="tab">C</a></li>
  <li><a href="#d" aria-controls="d" role="tab" data-toggle="tab">D</a></li>
  <li><a href="#e" aria-controls="e" role="tab" data-toggle="tab">E</a></li>
</ul>

<div class="tab-content" id="field">
  <div role="tabpanel" class="tab-pane active" id="a">
    <div id="AA">
      <div class="free-text">
        <h4>aaaa</h4><input name="heading" type="text" rows="5" cols="80">
        <h5>bbbb</h5><textarea name="content" id="" cols="80" rows="5"></textarea>
      </div>
    </div>
  </div>
  <div role="tabpanel" class="tab-pane" id="b">
    <div id="BB">
      <!-- free text -->
      <div class="free-text">
        <h4>cccc</h4><input name="heading" type="text" rows="5" cols="80">
        <h5>dddd</h5><textarea name="content" id="" cols="80" rows="5"></textarea>
      </div>
    </div>
  </div>
  <div role="tabpanel" class="tab-pane" id="c">
    <div id="CC">
      <div class="free-text">
        <h4>eeee</h4><input name="heading" type="text" rows="5" cols="80">
        <h5>ffff</h5><textarea name="content" id="" cols="80" rows="5"></textarea>
      </div>
    </div>
  </div>
  <div role="tabpanel" class="tab-pane" id="d">
    <div id="DD">
      <div class="free-text">
        <h4>gggg</h4><input name="heading" type="text" rows="5" cols="80">
        <h5>hhhh</h5><textarea name="content" id="" cols="80" rows="5"></textarea>
      </div>
    </div>
  </div>
  <div role="tabpanel" class="tab-pane" id="e">
    <div id="FF">
      <div class="free-text">
        <h4>iiii</h4><input name="heading" type="text" rows="5" cols="80">
        <h5>jjjj</h5><textarea name="content" id="" cols="80" rows="5"></textarea>
      </div>
    </div>
  </div>
  <ul class="list-inline">
    <li><a href="#">キャンセル</a></li>
    <li><a href="#" id="saveField">確定</a></li>
  </ul>
</div>

4
  • 大変勉強になりました。 こちらのコードの方が数倍シンプルでやりたかった事そのものでした。javascriptとjQueryの記述でかなりごちゃごちゃになっている状態なので改めて勉強し直そうと思います。有難うございました。
    – user76333
    Commented 2015年3月27日 0:19
  • 一つ気になりましたので質問させてください。使用する際に#fieldにゆにーくIdを付属させていく予定の場合、 var thisId = obj.parentNode.parentNode.parentNode.id;のようにid名を取得してから使用する場合は$(#div[thisId])として使用できますか?
    – user76333
    Commented 2015年3月27日 0:51
  • @kphex IDの取得はvar thisId = $(this).parents('.tab-content').attr('id')でできます。この場合、セレクタは$('div#'+thisId)として使用できます。質問者さんの場合だと、わざわざIDのを取得してセレクタとして指定する必要はないので.tab-contentでタブパネルを選択するように変更しておきました。
    – kotatsu
    Commented 2015年3月27日 1:07
  • 私の説明が足りずに申し訳ありません。今回の件ですと.tab-content以下は繰り返し追加される要素でしたので別にユニークidを振り分けていました。@kotatsuさんの最初の記述通りの方法でもうまくいきましたので大変助かりました。有難うございます。
    – user76333
    Commented 2015年3月27日 2:21
0

appendが見つかりませんがどこのタグのことをいっているんですか?
jQueryセレクタはかなり幅広いのでそこから勉強し直した方がいいと思います。

function saveField() {
  $('.tab-pane').find('input, textarea').each(function(){
      $('div#field').append('<div>' + $(this).prev().text() + $(this).val() + '</div>')
  });
}

viewはそのまま、saveField()だけを書き換えました。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。