-1

コードのどこが悪いのかは本当にわかりませんが、HTMLをプレビューすると正しく機能しません。私は何かを逃しましたか！？

問題、下をクリックすると、g1とg2は正常に機能しますが、g2をクリックすると、下ボタンをクリックするとg3と表示されますが、g4にジャンプし、上ボタンと下ボタンが機能しなくなります:(

function chgPic(id) {
  $('#show').attr('src', id).stop(true, true).hide().fadeIn();
}

//tooltip (rename the element to put tooltip on it "title")
//$(document).ready(function() {
//  $("#simple").tiptip();
//});

function up() {
  if (document.getElementById('g1').style.display == 'block') {
    $('#g1').show();
    $('#g2').hide();
    $('#g3').hide();
    $('#g4').hide();
  }
  else if (document.getElementById('g2').style.display == 'block') {
    $('#g1').show();
    $('#g2').hide();
    $('#g3').hide();
    $('#g4').hide();
  }
  else if (document.getElementById('g3').style.display == 'block') {
    $('#g1').hide();
    $('#g2').show();
    $('#g3').hide();
    $('#g4').hide();
  }
  else if (document.getElementById('g4').style.display == 'block') {
    $('#g1').hide();
    $('#g2').hide();
    $('#g3').show();
    $('#g4').hide();
  }
  else {
    $('#g1').hide();
    $('#g2').hide();
    $('#g3').hide();
    $('#g4').show();
  }
}

function down() {
  if (document.getElementById('g1').style.display == 'block') {
    $('#g1').hide();
    $('#g2').show();
    $('#g3').hide();
    $('#g4').hide();
  }
  else if (document.getElementById('g2').style.display == 'block') {
    $('#g1').hide();
    $('#g2').hide();
    $('#g3').show();
    $('#g4').hide();
  }
  else if (document.getElementById('g3').style.display == 'block') {
    $('#g1').hide();
    $('#g2').hide();
    $('#g3').hide();
    $('#g4').show();
  }
  else {
    $('#g1').hide();
    $('#g2').hide();
    $('#g3').hide();
    $('#g4').show();
  }
}
4

1 に答える 1

2

マークアップに何か問題があると思います。そのため、要素はあなたが考えているものではありません。たとえば、#g3タグを適切に閉じていない場合、#g4タグがタグ内にある可能性があります#g3。

必要以上のコードがありますが、要素が正しく設定されていれば問題なく動作するはずです。

jQuery を使用して、どの要素が表示されているかを確認できます。これにより、コードが機能するために最初に要素のdisplayスタイルを具体的に設定する必要がなくなります。block

function up() {
    if ($('#g2').is(':visible')) {
    $('#g1').show();
    $('#g2').hide();
  }
    else if ($('#g3').is(':visible')) {
    $('#g2').show();
    $('#g3').hide();
  }
    else if ($('#g4').is(':visible')) {
    $('#g3').show();
    $('#g4').hide();
  }
}

function down() {
    if ($('#g1').is(':visible')) {
    $('#g1').hide();
    $('#g2').show();
  }
    else if ($('#g2').is(':visible')) {
    $('#g2').hide();
    $('#g3').show();
  }
    else if ($('#g3').is(':visible')) {
    $('#g3').hide();
    $('#g4').show();
  }
}

デモ: http://jsfiddle.net/86GVE/2/

要素を選択して jQuery オブジェクトに入れると、コードの繰り返しが少なくなり、好きなだけ要素を簡単に追加できます。

var g = $('#g1,#g2,#g3,#g4');

function up() {
    for (var i = 1; i < g.length; i++) {
        if (g.eq(i).is(':visible')) {
            g.eq(i - 1).show();
            g.eq(i).hide();
            break;
        }
    }
}

function down() {
    for (var i = 0; i < g.length - 1; i++) {
        if (g.eq(i).is(':visible')) {
            g.eq(i + 1).show();
            g.eq(i).hide();
            break;
        }
    }
}

デモ: http://jsfiddle.net/86GVE/1/

id の代わりにクラスを使用して要素を検索すると、Javascript コードを変更せずに要素を追加することもできます。含めたいすべての要素に同じクラスを追加して、それらを選択するだけです。例：

var g = $('.g');
于 2013-01-25T08:56:49.520 に答える