使用jQuery更改div的大小

时间:2016-08-14 22:13:54

标签: javascript jquery html css

我是jQuery的新手,需要更改父div的类。 当用户点击“切换 ”按钮时,父div的类从“ col-md-8 ”更改为“< strong> col-md-4 “并且图像的高度属性从” 500 “变为” 300 “。任何人都可以建议我解决这个问题。 我的HTML代码是

<div class="col-md-8">
     <div class="panel panel-default">
         <div class="panel-heading">
             <strong>Image</strong>
             <button class="btn btn-default" style="float:right;">Toggle Class</button>
          </div>
      <div class="panel-body">
          <img class="img-responsive" height="500" src="http://lorempixel.com/750/500/" />
      </div>
  </div>
</div>

2 个答案:

答案 0 :(得分:1)

在这里,您需要的代码是:

var $div = $('#div');
var $img = $('#img');

$('button').on('click', function() {
    if ($div.hasClass('col-md-8')) {
        $div.removeClass('col-md-8');
        $div.addClass('col-md-4');
        $img.attr('height', 300);
    } else {
        $div.removeClass('col-md-4');
        $div.addClass('col-md-8');
        $img.attr('height', 500);
    }
});
  • 为您的div添加div ID,为您的图片添加img ID(或按类或标记名称定位)。

答案 1 :(得分:1)

您已在图片元素中添加了class='img-responsive'。这是一个Bootstrap类,将您的图像转换为响应的图像。

这意味着当 调整其父div 时, 会自行调整

Bootstrap响应式图片:http://v4-alpha.getbootstrap.com/content/images/#responsive-images

要更改父div,请在div中添加id='parent',为按钮添加id='toggle'。另外,在您的按钮中,您可以添加名为style='float:right'的类,而不是pull-right。它是一回事。

<div class="col-md-8" id='parent' >
     <div class="panel panel-default">
         <div class="panel-heading">
             <strong>Image</strong>
             <button class="btn btn-default pull-right" 
                id='toggle'>Toggle Class</button>
         </div>

         <div class="panel-body" style=''>
             <img class="img-responsive" height='500' 
                 src="http://lorempixel.com/750/500/" />
        </div>
  </div>
</div>

Jquery的

$(document).ready(function(){
   $('#toggle').on('click',function(){
       $('#parent').toggleClass('col-md-4');
   });
});

干杯! :)