Question

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

下一个按钮有效，但上一个按钮没有。它基本上将前两个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

提前致谢！

Answer 1

您正在做多少工作，单独移动文本和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/

Answer 2

jsBin demo

以下是对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则有p#content。

在您的HTML中：不能有3个相同的class元素！ ID是每页唯一的。请改用<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>（分别更改CSS。）

你的HTML：

{{1}}

Answer 3

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

在你的第一行

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

并且在匿名函数的主体中有一段时间后你有

$(function(){.....

表示

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

如果doc处于就绪状态，那么我认为不会再次触发load事件。我会将所有代码放在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'));
});

});

（paranthesis可能不匹配......）

之前的jQuery。（）/ prependTo（）错误

3 个答案:

jsBin demo