有没有办法在两个元素之间切换/交换值？

时间：2016-04-12 03:56:05

标签： javascript jquery

也许是一个愚蠢的问题..但有没有办法'更干净'切换/交换那些价值？ （不需要变量，交换函数??）

示例：的

//$( this ).offset(); 55 20
//$("article.front"); 150 60
     $( this ).swapOffset($("article.front"));
//$( this ).offset(); 150 60
//$("article.front"); 55 20

实施例 

  var offsetA = $("article.front").offset(),
    offsetB = $(this).offset();
  [offsetA, offsetB] = [offsetB, offsetA];
  $("article.front").offset(offsetA);
  $(this).offset(offsetB);

示例 

  var $temp = $("article.front").offset();
  $("article.front").offset($(this).offset());
  $(this).offset($temp);

示例： 

  var offset = $("article.front").offset();
  var offsetNew = $(this).offset();
  $("article.front").offset({
    top: offsetNew.top,
    left: offsetNew.left
  });
  $(this).offset({
    top: offset.top,
    left: offset.left
  });

完整示例： 

$("article").each(function(index) {
  var offset = $(this).offset();
  var offsetnext = offset.top + 70;
  if (index == 0) {
    $(this).offset({
      top: offset.top,
      left: offset.left
    });
  }
  $(this).next().offset({
    top: offsetnext,
    left: offset.left
  });
});

$("article").click(function() {
  var offset = $("article.front").offset();
  var offsetNew = $(this).offset();
  $("article.front").offset({
    top: offsetNew.top,
    left: offsetNew.left
  });
  $(this).offset({
    top: offset.top,
    left: offset.left
  });
  $("article.front").removeClass("front");
  $(this).addClass("front");

  $("article").each(function(index) {
    var thisOffset = $(this).offset();
    $(this).css('z-index', thisOffset.top);
  });
  $("body").scrollTop(offset.top);
});

$(function() {
  $("article:last-of-type").addClass("front");
});
@import url(https://fonts.googleapis.com/css?family=Bad+Script);
 * {
  box-sizing: border-box;
}
article {
  width: 70%;
  margin: 0 auto 15px;
  border-radius: 15px 15px 42px 42px;
  font-family: 'Bad Script', cursive;
  color: rgba(255, 255, 255, 1);
  text-shadow: 2px 2px rgba(0, 0, 0, 1);
  border-style: solid;
  border-width: 15px;
  border-color: rgba(0, 0, 0, 1);
  background-color: rgba(0, 0, 0, 1);
  border-color: rgba(1, 30, 30, 1);
  box-shadow: 4px -3px 3px 0px rgba(255, 255, 255, 0.75);
}
article > header > h2 {
  margin: 0;
  padding: 15px;
  cursor: pointer;
}
article > p {
  padding: 0 30px;
}
article > footer {
  padding: 0px 15px;
  font-size: 60%;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgba(0, 0, 0, 0.2);
}
article.blue {
  background-color: rgba(0, 139, 139, 1);
}
article.blue > header {
  background-color: rgba(0, 93, 93, 1);
}
article.red {
  background-color: rgba(218, 0, 39, 1);
}
article.red > header {
  background-color: rgba(146, 0, 26, 1);
}
article.green {
  background-color: rgba(53, 180, 0, 1);
}
article.green > header {
  background-color: rgba(38, 129, 0, 1);
}
@media screen and (max-width: 760px) {
  article {
    width: 100%;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="blue">
  <header>
    <h2>Hello World</h2>
  </header>
  <p>this text is so meaningless.</p>
  <p>Still we love to do nothing.</p>
  <footer>
    And my foot is stuck in pile of shit!!
  </footer>
</article>

<article class="red">
  <header>
    <h2>Hello World</h2>
  </header>
  <p>this text is so meaningless.</p>
  <p>Still we love to do nothing.</p>
  <footer>
    And my foot is stuck in pile of shit!!
  </footer>
</article>

<article class="green">
  <header>
    <h2>Hello World</h2>
  </header>
  <p>this text is so meaningless.</p>
  <p>Still we love to do nothing.</p>
  <footer>
    And my foot is stuck in pile of shit!!
  </footer>
</article>

<article class="blue">
  <header>
    <h2>Hello World</h2>
  </header>
  <p>this text is so meaningless.</p>
  <p>Still we love to do nothing.</p>
  <footer>
    And my foot is stuck in pile of shit!!
  </footer>
</article>

<article class="blue">
  <header>
    <h2>Hello World</h2>
  </header>
  <p>this text is so meaningless.</p>
  <p>Still we love to do nothing.</p>
  <footer>
    And my foot is stuck in pile of shit!!
  </footer>
</article>

<article class="blue">
  <header>
    <h2>Hello World</h2>
  </header>
  <p>this text is so meaningless.</p>
  <p>Still we love to do nothing.</p>
  <footer>
    And my foot is stuck in pile of shit!!
  </footer>
</article>

<article class="blue">
  <header>
    <h2>Hello World</h2>
  </header>
  <p>this text is so meaningless.</p>
  <p>Still we love to do nothing.</p>
  <footer>
    And my foot is stuck in pile of shit!!
  </footer>
</article>

<article class="red">
  <header>
    <h2>Hello World</h2>
  </header>
  <p>this text is so meaningless.</p>
  <p>Still we love to do nothing.</p>
  <footer>
    And my foot is stuck in pile of shit!!
  </footer>
</article>

这是一个示例

1 个答案:

答案 0 :(得分：0)

我认为你可以只分配offset对象

$("article").click(function() {
  var $front = $("article.front"),
    $this = $(this);
  var offset = $this.offset();
  $this.offset($front.offset());
  $front.offset(offset);
});


$("article").each(function(index) {
  var offset = $(this).offset();
  var offsetnext = offset.top + 70;
  if (index == 0) {
    $(this).offset({
      top: offset.top,
      left: offset.left
    });
  }
  $(this).next().offset({
    top: offsetnext,
    left: offset.left
  });
});

$("article").click(function() {
  var $front = $("article.front"),
    $this = $(this);
  var offset = $this.offset();
  $this.offset($front.offset());
  $front.offset(offset);

  $("article.front").removeClass("front");
  $(this).addClass("front");

  $("article").each(function(index) {
    var thisOffset = $(this).offset();
    $(this).css('z-index', thisOffset.top);
  });
  $("body").scrollTop(offset.top);
});

$(function() {
  $("article:last-of-type").addClass("front");
});
@import url(https://fonts.googleapis.com/css?family=Bad+Script);
 * {
  box-sizing: border-box;
}
article {
  width: 70%;
  margin: 0 auto 15px;
  border-radius: 15px 15px 42px 42px;
  font-family: 'Bad Script', cursive;
  color: rgba(255, 255, 255, 1);
  text-shadow: 2px 2px rgba(0, 0, 0, 1);
  border-style: solid;
  border-width: 15px;
  border-color: rgba(0, 0, 0, 1);
  background-color: rgba(0, 0, 0, 1);
  border-color: rgba(1, 30, 30, 1);
  box-shadow: 4px -3px 3px 0px rgba(255, 255, 255, 0.75);
}
article > header > h2 {
  margin: 0;
  padding: 15px;
  cursor: pointer;
}
article > p {
  padding: 0 30px;
}
article > footer {
  padding: 0px 15px;
  font-size: 60%;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgba(0, 0, 0, 0.2);
}
article.blue {
  background-color: rgba(0, 139, 139, 1);
}
article.blue > header {
  background-color: rgba(0, 93, 93, 1);
}
article.red {
  background-color: rgba(218, 0, 39, 1);
}
article.red > header {
  background-color: rgba(146, 0, 26, 1);
}
article.green {
  background-color: rgba(53, 180, 0, 1);
}
article.green > header {
  background-color: rgba(38, 129, 0, 1);
}
@media screen and (max-width: 760px) {
  article {
    width: 100%;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="blue">
  <header>
    <h2>Hello World</h2>
  </header>
  <p>this text is so meaningless.</p>
  <p>Still we love to do nothing.</p>
  <footer>
    And my foot is stuck in pile of shit!!
  </footer>
</article>

<article class="red">
  <header>
    <h2>Hello World</h2>
  </header>
  <p>this text is so meaningless.</p>
  <p>Still we love to do nothing.</p>
  <footer>
    And my foot is stuck in pile of shit!!
  </footer>
</article>

<article class="green">
  <header>
    <h2>Hello World</h2>
  </header>
  <p>this text is so meaningless.</p>
  <p>Still we love to do nothing.</p>
  <footer>
    And my foot is stuck in pile of shit!!
  </footer>
</article>

<article class="blue">
  <header>
    <h2>Hello World</h2>
  </header>
  <p>this text is so meaningless.</p>
  <p>Still we love to do nothing.</p>
  <footer>
    And my foot is stuck in pile of shit!!
  </footer>
</article>

<article class="blue">
  <header>
    <h2>Hello World</h2>
  </header>
  <p>this text is so meaningless.</p>
  <p>Still we love to do nothing.</p>
  <footer>
    And my foot is stuck in pile of shit!!
  </footer>
</article>

<article class="blue">
  <header>
    <h2>Hello World</h2>
  </header>
  <p>this text is so meaningless.</p>
  <p>Still we love to do nothing.</p>
  <footer>
    And my foot is stuck in pile of shit!!
  </footer>
</article>

<article class="blue">
  <header>
    <h2>Hello World</h2>
  </header>
  <p>this text is so meaningless.</p>
  <p>Still we love to do nothing.</p>
  <footer>
    And my foot is stuck in pile of shit!!
  </footer>
</article>

<article class="red">
  <header>
    <h2>Hello World</h2>
  </header>
  <p>this text is so meaningless.</p>
  <p>Still we love to do nothing.</p>
  <footer>
    And my foot is stuck in pile of shit!!
  </footer>
</article>

相关问题
最新问题