-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 回答