1

実験用のサイトを構築していますが、一部のコードに問題があります。

次のボタンは機能しますが、前のボタンは機能しません。基本的に、最初の 2 つの div をクラス「tri」と交換しますが、他の div は交換しません。

なぜ一方が機能し、もう一方が機能しないのか理解できません。

以前に 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#contentID はページごとに一意です。代わりに使用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 に答える