Question

我想要刷新页面或点击按钮我得到父亲身高＆amp;宽度div。

例如

我想在id“data_3”中获取父高度和宽度div

我已经在id“data_3”中获得父高和宽度div 当显示幻灯片3时，但是当幻灯片1或幻灯片2或其他幻灯片我再次单击按钮时，我无法获取id“data_3”中的父高度和宽度div。

我希望在其他幻灯片轮播中获取id“data_3”中的父高度和宽度div（不仅仅是幻灯片3）我很困惑解决这个问题。

这是我的代码 in Jsfiddle

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
    <style type="text/css">
        .carousel {
        height: 500px;
        margin-bottom: 60px;
        }
        /* Since positioning the image, we need to help out the caption */
         .carousel-caption {
            z-index: 10;
        }
        /* Declare heights because of positioning of img element */
         .carousel .item {
            width: 100%;
            height: 500px;
            background-color: #777;
        }
        .carousel-inner > .item > img {
            position: absolute;
            top: 0;
            left: 0;
            min-width: 100%;
            height: 500px;
        }
        @media (min-width: 768px) {
            .carousel-caption p {
                margin-bottom: 20px;
                font-size: 21px;
                line-height: 1.4;
            }
        }
    </style>
    <script type='text/javascript'>
        $(window).load(function(){
            $("#carousel").carousel();
            $( ".carousel-indicators" ).hide();
            $("#btn").click(function(){
              var width_div_parent    =  $('#data_3').closest('.box').width();
              var height_div_parent   =  $('#data_3').closest('.box').height();
              $("#result").html("Height : "+height_div_parent+" & Width : "+width_div_parent);
            }); 
        });
    </script>
</head>

<body>
  <center><button type="button" id="btn">Get Height & Width Div in Box 3</button><br/>
<div id="result"></div></center>
<div  data-interval="2000" id="carousel" class="carousel slide" data-ride="carousel">
    <!-- Menu -->
    <ol class="carousel-indicators">
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
        <li data-target="#carousel" data-slide-to="1"></li>
        <li data-target="#carousel" data-slide-to="2"></li>
    </ol>

    <!-- Items -->
    <div class="carousel-inner">
        <div class="item active">
           <div class="box">
              <input type="hidden" name="data" id="data_1" value="1">
              <h2 style="text-align:center">Box 1</h2>
            </div>
        </div>
        <div class="item">
            <div class="box" >
              <input type="hidden" name="data" id="data_2" value="2">
              <h2 style="text-align:center">Box 2</h2>
            </div>
        </div>
        <div class="item">
            <div class="box" >
              <input type="hidden" name="data" id="data_3" value="3">
              <h2 style="text-align:center">Box 3</h2>
            </div>
        </div>
    </div> 
</body>
</html>

Answer 1

当您单击按钮并获得其高度和宽度时，您始终可以在旋转木马中查找活动项目。

在点击功能中尝试以下这些行：

const

获取Slide Boostrap轮播中的高度和宽度特定Div

1 个答案: