Question

我有两个问题。第一个是我尝试用innerHTML替换我的所有document.write，现在没有在页面上正确生成。我的问题的第二部分是我无法弄清楚我的toggleCurrent函数的逻辑，以便我可以隐藏显示当前显示的视图。示例 - 如果缩略图视图可见我想要隐藏/显示或者如果完整视图可见我想要隐藏/显示它。 http://jsfiddle.net/5M3k7/

//Creating generic Object
function Person(name,age,biog,thumb,char,bg,cider) {
    this.fullName = name;
    this.age = age;
    this.biog = biog;
    this.thumb = thumb;
    this.char = char;
    this.bg = bg;
    this.cider = cider;
}


//Creating new Objects
var jay = new Person ("Jay Jones",24,"Story","img","guy","bg","Fleet",true);
var jai = new Person ("Jai Janes",23,"Story","img","gal","bg","Sleet",true);
var dan = new Person ("Dan Dones",19,"Story","img","guy","bg","Leet",true);
var den = new Person ("Den Danes",49,"Story","img","guy","bg","Treat",true);
var dun = new Person ("Dun Dunes",20,"Story","img","guy","bg","Meet",true);
var vim = new Person ("Vim Vanes",22,"Story","img","guy","bg","Meat",true);

//Defining arrays
var characters = [jay, jai, dan, den, dun, vim];

//For loop goes though character array and prints it out.
var thumbs = function() {
    var full = document.getElementById('full');
    var cLength = characters.length;
    for (var i = 0; i < cLength; i++){
    full.innerHTML = '<div class="wrap"><div class="cont">' + "Name: " + characters[i].fullName + '<br/>' + 'Age: ' + characters[i].age + '<br/>' + 'Cider: ' + characters[i].cider + '</div></div>';
    }
    return;
};

var full = function() {
    var thumb = document.getElementById('fullthumb');
    var cLength = characters.length;
    for (var i = 0; i < cLength; i++){
    thumb.innerHTML = '<div class="fullwrap"><div class="bg"><div class="fullcont">Name: '
+ characters[i].fullName + '<br/> Age:' + characters[i].age + '<br/>Cider:' + characters[i].cider + '<div class="char"></div></div></div></div>';
    }
    return;
};

//Toggle Function
function toggleMenuDiv() {
var full = document.getElementById('full');
var thumb = document.getElementById('fullthumb');
var butt = document.getElementById('button');
   if (full.style.display == 'none') {
     full.style.display = 'block';
     thumb.style.display = 'none';
     butt.innerHTML = 'THUMB VIEW<span class="arrow-e"></span>';
   }
   else {
     full.style.display = 'none';
     thumb.style.display = 'block';
     butt.innerHTML = 'FULL VIEW<span class="arrow-e"></span>';
   }
}

//Toggle Function
function toggleCurrent() {
var chng = document.getElementById('change');
var thumb = document.getElementById('fullthumb');
var full = document.getElementById('full');
while (full.style.display == 'none')
  {
  if(thumb.style.display == 'block') {
     chng.innerHTML = 'HIDE<span class="arrow-n"></span>';
  }else{
     thumb.style.display = 'none';
     chng.innerHTML = 'SHOW<span class="arrow-s"></span>';
  }
  }

}

Answer 1

因为你一直在覆盖输入的最后一件事。

full.innerHTML = '<div class="wrap"><div class="cont">' + "Name: " + characters[i].fullName + '<br/>' + 'Age: ' + characters[i].age + '<br/>' + 'Cider: ' + characters[i].cider + '</div></div>';

您需要附加到innerHTML

full.innerHTML = full.innerHTML + '<div class="...

我需要Javascript语法和逻辑建议

1 个答案: