Question

我有一行带有可扩展选项的文本框。单击可展开按钮...文本字段大小加倍并与相邻的文本字段合并。如果相邻的文本字段包含值，则它将被推送到下一个文本字段。你能建议我怎么做吗

Answer 1

以下解决方案并不完美，但它可以帮助您入门。您可以通过运行代码段尝试此操作。

＆＃13;

$("[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();
    }
  }
});

＆＃13;

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

＆＃13;

这里使用了Bootstrap框架和jQuery，但你可以修改它。

可扩展文本字段与另一个文本字段合并

1 个答案: