Question

我正在尝试向元素添加属性。该属性将指示某个高度和屏幕宽度中心的位置。这就是为什么我尝试使用jquery来获得屏幕宽度中心的位置。

所以，这段代码： <script>$("p.slider-price").attr('data-position', '145, ' + (($("p.slider-price").parent().width() - $("p.slider-price").outerWidth()) / 2));</script>正确添加了属性data-position: "145, 500"。

但是我尝试对另一个元素使用相同的代码：$("p.house-description").attr('data-position', '200, ' + (($("p.house-description").parent().width() - $("p.house-description").outerWidth()) / 2));，但由于某种原因，微积分总是返回0，所以只添加data-position: "200, 0"。

最终代码是：

<script>
$("p.slider-price").attr('data-position', '145, ' + (($("p.slider-price").parent().width() - $("p.slider-price").outerWidth()) / 2));
$("p.house-description").attr('data-position', '200, ' + (($("p.house-description").parent().width() - $("p.house-description").outerWidth()) / 2));
</script>

所以问题是第二行的微积分不能正常工作（总是返回0），而第一行的微积分工作正常。有什么问题？

编辑：这是HTML代码：

p class="slider-price" data-in="fade" data-step="1" data-delay="250" data-out="fade">
                        $50,000
                    </p>    
                    <p class="house-description" data-in="fade" data-step="1" data-delay="350" data-out="fade">
                        Modern Apartment in Kiev, Ukraine
                    </p>

基本上这段代码：(($("p.house-description").parent().width() - $("p.house-description").outerWidth()) / 2)总是返回0;不知道为什么。

Answer 1

所以，只是在评论部分跟进我的帖子。您的p.slider-price默认显示为：block。它占用了父级的内部宽度。

您需要为您的js代码设置p.slider-price / description的宽度才能生效

p.slider-price{
  width:400px;
}

$(document).ready(function(){

  console.log( $("p.slider-price").parent().width() );
  console.log( $("p.slider-price").outerWidth() );
  var leftDist = (parseInt($("p.slider-price").parent().width()) - parseInt($("p.slider-price").outerWidth()))/2;
  console.log( leftDist );                       
  $("p.slider-price").attr('data-position', '145, ' + leftDist);

});

codepen示例：http://codepen.io/anon/pen/bNRORQ

向元素添加属性

1 个答案: