0

我正在尝试创建彼此相邻的拇指，但它不起作用。它似乎将它们相互叠加输出。我希望它们相距 5px。

--- 我需要定位是绝对的。我需要这样，以便在我将它们全部放在一起之后，我希望被点击的那个生长，左边的所有应该消失到左边，所有右边的应该去右边。需要绝对定位，以便我可以控制它。

HTML

<div class="portItem">
    <div class="itemContent-wrap">
        <div class="itemContent">
            <div class="container">
                <div class="thumbWrap">
                    <div class="thumb"></div>
                    <div class="thumb"></div>
                    <div class="thumb"></div>
                    <div class="thumb"></div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.thumb {
  height: 200px;
  width: 450px;
  position: absolute;
  display: inline-block;
  background: #D0E182;
  margin-top: 25px;
  margin-right: 5px;
  transition: all 1s ease-in-out;
  top: 0;
  left: 0;
}

Javascript

$(document).ready(function(){ 
    $('.portItem').each(function() {
        $('.thumb', this).each(function(i) {
              $('.thumb').css('left',40*i);
         }).appendTo('.body');
     });
});

小提琴：http: //jsfiddle.net/nTHDk/11/

解决方案！： http: //jsfiddle.net/nTHDk/14/

先感谢您！

4

4 回答 4

2

你的代码中有很多错别字：

看到这个更新的小提琴

  1. 您没有将 Jquery 添加到您的小提琴中。
  2. 在小提琴中你不需要写document.ready
  3. 对于每个选择使用$(this).css('left',40*i +"px");//notice this和px
  4. 你的盒子尺寸太大而无法注意到运动，我缩小了它们。
  5. 我删除了appendTo，元素已经位于你的 DOM 中（你想移动它们吗？）
  6. 如果您想使用该appenedTo功能，请将选择器固定为$('body')
于 2013-09-17T15:20:47.610 回答
1

$('.thumb').css('left',40*i);应该是$(this).css('left',40*i);。您选择了 DOM 中的所有.thumb元素，但此时您已经选择了正确的元素。

http://jsfiddle.net/nTHDk/8/

于 2013-09-17T15:18:22.050 回答
0

更改position:absolute为position:relative和$('thumb').css('left', 40*i)_$(this).css('left',40*i);

对 JavaScript 的更改不是必需的，但是您这样做的方式是多余的。对 CSS 的更改将获得您的间距。当您使用position:absolute它们时，它们都位于彼此之上。

于 2013-09-17T15:22:36.603 回答
0

首先将 jQuery 添加到您的小提琴中，并且您实际上正在移动内部每个循环中的所有 .thumb 元素，您必须使用 $(this)，如下所示：

$(document).ready(function(){ 
    $('.portItem').each(function() {
        $(this).find('.thumb').each(function(i) {
              $(this).css('left',50*i);
         }).appendTo('.body');
     });
});

这是新的小提琴

于 2013-09-17T15:31:31.933 回答