1

我正在建立一个实验站点，但我遇到了一些代码问题。

下一个按钮有效，但上一个按钮无效。它基本上将前两个 div 与“tri”类交换，而不是另一个。

我无法理解为什么一个有效而另一个无效。

我已经尝试过 prependTo 和之前但都不能正常工作？

随意看这里的代码：

HTML：http ://epicgiggle.co.uk/test/-testtwo/index.html

CSS：http ://epicgiggle.co.uk/test/-testtwo/style.css

jQuery：http ://epicgiggle.co.uk/test/-testtwo/custom.js

提前致谢！

4

3 回答 3

2

您正在做很多工作，分别移动文本和 CSS 属性。自己移动div要容易得多。（.insertBefore并且.insertAfter是在这种特殊情况下您需要的方法。）

$(".prev").click(function() {
        $('.tri').last().insertBefore( $('.tri').first() );
});
$(".next").click(function() {
        $('.tri').first().insertAfter( $('.tri').last() );
});

http://jsfiddle.net/mblase75/Dnwvy/2/

于 2012-06-22T14:04:26.027 回答
1

jsBin 演示

这是您的 jQuery 的更正和简化：

var dh = $('.tri').height();

$(function() {
    $("p.content").css('padding-top', (dh/3.5));
    $("#title").text(currentDiv.attr('title'));
});


$("title").text( $("div.tri").first().attr('title'));

$(".prev, .next").click(function() {
  
  var $first = $('.tri').first();
  var $last = $('.tri').last();
  
  if( $(this).hasClass('next') ){
    $first.insertAfter( $last );
  }else{
    $last.insertBefore( $first );
  }
  
  $("#title").css('color', ( $("div.tri").first().css('background-color') ) );
  $("#title").text( $("div.tri").first().attr('title') ); 
  
});

{ }您的标记中有额外#的内容，而title.

在您的 HTML 中：您不能有 3 个相同的p#content元素！每个页面的 ID 都是唯一的。改为使用class（分别更改您的 CSS。）

你的html：

<div class="title"><p id="title">One</p></div>
<div class="prev"><p>Prev</p></div>
<div class="next"><p>Next</p></div>
  
<div class="tri" id="one" title="One"><p style="padding-top: 57.1429px;" class="content">Content One</p></div>
<div class="tri" id="two" title="Two"><p style="padding-top: 57.1429px;" class="content">Content Two</p></div>
<div class="tri" id="three" title="Three"><p style="padding-top: 57.1429px;" class="content">Content Three</p></div>
于 2012-06-22T14:01:08.640 回答
0

我还看到了另一件奇怪的事情。

在第一行你有

$(document).ready(function(){....

一段时间后，您拥有的匿名函数的主体

$(function(){.....

意思是

$(document).load(function().....

如果文档处于就绪状态，那么我认为不会再次触发 load 事件。我会将所有代码都放在像这样的加载事件事件中

$(function() {

var dh = $('.tri').height();
var currentDiv;
var previousDiv;

$("p#content").css('padding-top', (dh/3.5));
$("#title").text(currentDiv.attr('title'));

currentDiv = $("div.tri").first();
lastDiv = $("div.tri").last();
$("title").text(currentDiv.attr('title'));
$(".prev").click(function() {
        lastDiv.before(currentDiv);
        lastDiv = $("div.tri").first();
        $("#title").text(currentDiv.attr('title'));
        $("#title").css('color', (currentDiv.css('background-color')));
        $("title").text(currentDiv.attr('title'));
});
$(".next").click(function(){
        $(currentDiv).appendTo('body');
        currentDiv = $("div.tri").first();
        $("#title").text(currentDiv.attr('title'));
        $("#title").css('color', (currentDiv.css('background-color')));
        $("title").text(currentDiv.attr('title'));
});

});

（括号可能不匹配......）

于 2012-06-22T14:10:38.570 回答