如何扩展列

Question

我正在考虑让我的用户能够更改他们的卡片大小。 这种概念验证有效，但它还没有“为黄金时间做好准备”。

问：这是正确的做法，还是我走错了路？

$(document).on('click','#expand',expand)
function expand() {
  var column = $(this).closest('.card').parent()
  if (column.hasClass('col-sm-3')) {
	  column.removeClass('col-sm-3').addClass('col-sm-4')
	  	.next().removeClass('col-sm-9').addClass('col-sm-8')
  } else if (column.hasClass('col-sm-4')) {
	  column.removeClass('col-sm-4').addClass('col-sm-5')
	  	.next().removeClass('col-sm-8').addClass('col-sm-7')
  } else if (column.hasClass('col-sm-5')) {
	  column.removeClass('col-sm-5').addClass('col-sm-6')
	  	.next().removeClass('col-sm-7').addClass('col-sm-6')
  } else if (column.hasClass('col-sm-6')) {
	  column.removeClass('col-sm-6').addClass('col-sm-7')
	  	.next().removeClass('col-sm-6').addClass('col-sm-5')
  } else if (column.hasClass('col-sm-7')) {
	  column.removeClass('col-sm-7').addClass('col-sm-8')
	  	.next().removeClass('col-sm-5').addClass('col-sm-4')
  } else if (column.hasClass('col-sm-8')) {
	  column.removeClass('col-sm-8').addClass('col-sm-9')
	  	.next().removeClass('col-sm-4').addClass('col-sm-3')
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3">
      <div class="card">
        <div class="card-header">
          header1
        </div>
        <div class="card-block">
          block1
        </div>
        <button type="button" class="btn pull-xs-right" id="expand">
          >>
        </button>
      </div>
    </div>
    <div class="col-sm-9">
      <div class="card">
        <div class="card-header">
          header2
        </div>
        <div class="card-block">
          block2
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.js"></script>

Answer 1

我失去了很多if else条件，只需添加一个增加/减少列大小的简单计数器：

$(document).ready(function(){
  var left_col = 3;

  $('#expand').on('click', function(){
    if(left_col < 9){
      left_col = left_col + 1;

      $('#left').removeClass().addClass('col-sm-' + left_col);
      $('#right').removeClass().addClass('col-sm-' + (12-left_col));
    }
  })
})

JSFiddle

Answer 2

您可以简化代码。我没有复制你的代码，但重新创建了你想要做的事情。

更新：现在根据第一列缩小下一列。

更新：可以单击第二列以反向执行所有操作。

Working Example

＆＃13;

＆＃13;

$('[class*="col-sm-"]').click(function() {

  var column = parseInt($(this).attr('class').replace('col-sm-', '')),
    maxCol = 12,
    minCol = 1;

  if (column < maxCol) {
    column = column + 1;
    $(this).attr('class', 'col-sm-' + column).text('col-sm-' + column);
    if ($(this).next().length) {
      $(this).next().attr('class', 'col-sm-' + (maxCol - column)).text('col-sm-' + (maxCol - column));
    } else {
      $(this).prev().attr('class', 'col-sm-' + (maxCol - column)).text('col-sm-' + (maxCol - column));
    }
  }

});

＆＃13;

[class*="col-sm-"] {
  border: 1px solid black;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row">
  <div class="col-sm-3">3</div>
  <div class="col-sm-4">4</div>
</div>

＆＃13;

＆＃13;

＆＃13;

您需要做的就是更改我编写的jQuery选择器以满足您的需求。