拡張可能なテキストフィールドは別のものとマージします

Question

拡張可能なオプションのテキストボックスがあります。展開可能なボタンをクリックすると、テキストフィールドのサイズが倍になり、隣接するテキストフィールドとマージされます。隣接するテキストフィールドに値が含まれている場合は、次のテキストフィールドにプッシュされます。この方法を教えてもらえますか？

Answer 1

次の解決方法は完璧ではありませんが、始めるのに役立ちます。スニペットを実行することでこれを試すことができます。

$("[data-merge-to]").click(function(e) { 
 
    var $this = $(this); 
 
    if ($this.data("merge-to") === "right") { 
 
    var $left = $this.closest(".input-group").find("input").first(); 
 
    var $right = $this.closest("[class^=col-]").next().find("input").first(); 
 
    } 
 
    if ($this.data("merge-to") === "left") { 
 
    var $left = $this.closest("[class^=col-]").prev().find("input").first(); 
 
    var $right = $this.closest(".input-group").find("input").first(); 
 
    } 
 
    var merged = $.grep([$left.val(), $right.val()], function(str) { 
 
    return typeof str === "string" && str.length > 0; 
 
    }).join(" "); 
 
    var lContainer = $left.closest("[class^=col-]"); 
 
    var rContainer = $right.closest("[class^=col-]"); 
 
    var leftW = parseInt(lContainer.attr("class").match(/(?!col-\w{2}-)\d+\b/i)); 
 
    var rightW = parseInt(rContainer.closest("[class^=col-]").attr("class").match(/(?!col-\w{2}-)\d+\b/i)); 
 
    $left.val(merged); 
 
    lContainer.removeClass().addClass("col-xs-" + (leftW + rightW)); 
 
    rContainer.remove(); 
 
    if(lContainer.is(":last-child")) { 
 
    lContainer.find(".input-group-btn:last-child").remove(); 
 
    if(!lContainer.has(".input-group-btn").length) { 
 
     $left.prependTo(lContainer).nextAll().remove(); 
 
    } 
 
    } 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-4"> 
 
     <div class="input-group"> 
 
     <input type="text" class="form-control" value="value 1"> 
 
     <span class="input-group-btn"> 
 
     <button class="btn btn-default" type="button" data-merge-to="right"><span class="glyphicon glyphicon-resize-horizontal" aria-hidden="true"></span></button> 
 
     </span> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
     <div class="input-group"> 
 
     <span class="input-group-btn"> 
 
     <button class="btn btn-default" type="button" data-merge-to="left"><span class="glyphicon glyphicon-resize-horizontal" aria-hidden="true"></span></button> 
 
     </span> 
 
     <input type="text" class="form-control" value="value 2"> 
 
     <span class="input-group-btn"> 
 
     <button class="btn btn-default" type="button" data-merge-to="right"><span class="glyphicon glyphicon-resize-horizontal" aria-hidden="true"></span></button> 
 
     </span> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
     <div class="input-group"> 
 
     <span class="input-group-btn"> 
 
     <button class="btn btn-default" type="button" data-merge-to="left"><span class="glyphicon glyphicon-resize-horizontal" aria-hidden="true"></span></button> 
 
     </span> 
 
     <input type="text" class="form-control" value="value 3"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

ブートストラップフレームワークとjQueryは、ここで使用されていますが、これを変更することができます。