2013-06-14 3 views
1

В следующем коде я пытаюсь (с помощью Jquery) создавать объекты с массивами, а затем вызывать эти объекты для отображения в существующем DIV, когда я нажимаю ссылку.нежелательный возвращаемый пустой объект

У меня в основном создана матрица размером 5x5; в котором каждый «ящик» содержит ссылку.

Текущий код, который я написал, возвращает это: [объект объекта]. (Что я считаю это пустой массив

HTML (я только показывать одну строку матрицы, есть еще четыре).

<body> 

<div id="container"> 

<div id="logo" class="center"> 

<img src="jeoparody.png" /> 

</div> 

<div id="wood" class="center"> 

    <ul id="categories"> 
     <li>The Global Age</li> 
     <li>Age of Revolutions</li> 
     <li>Era of Global Wars</li> 
     <li>The Post War Period</li> 
     <li>Geography</li> 
    </ul> 

<div class="clear"></div> 

<hr /> 

<div class="clear"></div> 

    <ul id="rowOne" class="center"> 
     <li><a href="#">$100</a></li> 
     <li><a href="#">$100</a></li> 
     <li><a href="#">$100</a></li> 
     <li><a href="#">$100</a></li> 
     <li><a href="#">$100</a></li> 
    </ul> 

<div class="clear"></div> 

    <ul id="rowTwo" class="center"> 
     <li><a href="#">$200</a></li> 
     <li><a href="#">$200</a></li> 
     <li><a href="#">$200</a></li> 
     <li><a href="#">$200</a></li> 
     <li><a href="#">$200</a></li> 
    </ul> 

<div class="clear"></div> 

    <ul id="rowThree" class="center"> 
     <li><a href="#">$300</a></li> 
     <li><a href="#">$300</a></li> 
     <li><a href="#">$300</a></li> 
     <li><a href="#">$300</a></li> 
     <li><a href="#">$300</a></li> 
    </ul> 

<div class="clear"></div> 

<ul id="rowFour" class="center"> 
    <li><a href="#">$400</a></li> 
    <li><a href="#">$400</a></li> 
    <li><a href="#">$400</a></li> 
    <li><a href="#">$400</a></li> 
    <li><a href="#">$400</a></li> 
</ul> 

<div class="clear"></div> 

<ul id="rowFive" class="center"> 
    <li><a href="#">$500</a></li> 
    <li><a href="#">$500</a></li> 
    <li><a href="#">$500</a></li> 
    <li><a href="#">$500</a></li> 
    <li><a href="#">$500</a></li> 
</ul> 
</div> 

<div id="footer" class="center"></div> 

</div> 

<div id="clueContainer" class="center"></div> 

</body> 

JQuery:

$(document).ready(function() { 

/***The objects that I am creating with arrays***/ 
var columnOne = { 
    '$100':'On the world political map, where were some of the major states and empires located about 1500 A.D. (C.E.)?', 
    '$200':'What were the artistic, literary, and intellectual ideas of the Renaissance?', 
    '$300':'Where were the five world religions located around 1500 A.D. (C.E.)?', 
    '$400':'What were the regional trading patterns about 1500 A.D. (C.E.)?', 
    '$500':'Why were the regional trading patterns important?' 
}; 

var columnTwo = { 
    '$100':'A', 
    '$200':'B', 
    '$300':'C', 
    '$400':'D', 
    '$500':'E' 
}; 

var columnThree = { 
    '$100':'F', 
    '$200':'G', 
    '$300':'H', 
    '$400':'I', 
    '$500':'J' 
}; 

var columnFour = { 
    '$100':'K', 
    '$200':'L', 
    '$300':'M', 
    '$400':'N', 
    '$500':'O' 
}; 

var columnFive = { 
    '$100':'P', 
    '$200':'Q', 
    '$300':'R', 
    '$400':'S', 
    '$500':'T' 
}; 

/***To call back each object when the link is clicked***/ 
$('li').on('click', 'a', function() { 
    var foo = $(this).text(); 
    $("#clueContainer").text(columnOne, columnTwo, columnThree, columnFour, columnFive[foo]); 
}); 

/***makes the main screen disappear and the new DIV appear***/ 
$("#container").click(function(){ 
$("#container").hide(function(){ 
    $("#clueContainer").show(function(){ 
    }); 
}); 

/***makes the new DIV disappear and the main screen reappear***/ 
$("#clueContainer").click(function(){ 
$("#clueContainer").hide(function(){ 
    $("#container").show(function(){ 
    }); 
}); 
}); 
}); 
}); 

Кто-нибудь есть любая идея для решения?

+0

* «Текущий код, который я написал, возвращает это: [object object]. (Который, я считаю, является пустым массивом» * '[object Object]' - это то, что вы получаете при вызове 'toString' (явно или неявно) для объекта, который не переопределяет его чем-то более полезным. Объект не обязательно пуст. Обратите внимание, что ваш 'columnOne' и такие объекты являются объектами, а не массивами. (' Array # toString' по умолчанию выполняет 'join'.) –

+1

проверить последнее изменение! Есть ссылка попытаться использовать это, чтобы получить только ваш вопрос. –

ответ

3

Обновление, основано на дополнительных пояснениях из комментариев ниже

$(document).ready(function() { 

    /***The objects that I am creating with arrays***/ 
    var columnOne = { 
     '$100':'On the world political map, where were some of the major states and empires located about 1500 A.D. (C.E.)?', 
     '$200':'What were the artistic, literary, and intellectual ideas of the Renaissance?', 
     '$300':'Where were the five world religions located around 1500 A.D. (C.E.)?', 
     '$400':'What were the regional trading patterns about 1500 A.D. (C.E.)?', 
     '$500':'Why were the regional trading patterns important?' 
    }; 

    var columnTwo = { 
     '$100':'A', 
     '$200':'B', 
     '$300':'C', 
     '$400':'D', 
     '$500':'E' 
    }; 

    var columnThree = { 
     '$100':'F', 
     '$200':'G', 
     '$300':'H', 
     '$400':'I', 
     '$500':'J' 
    }; 

    var columnFour = { 
     '$100':'K', 
     '$200':'L', 
     '$300':'M', 
     '$400':'N', 
     '$500':'O' 
    }; 
    $('#rowFour').data('qstns', columnFour); 

    var columnFive = { 
     '$100':'P', 
     '$200':'Q', 
     '$300':'R', 
     '$400':'S', 
     '$500':'T' 
    }; 
    $('#rowFive').data('qstns', columnFive); 

    /***To call back each object when the link is clicked***/ 
    var $rows = $('#rowOne, #rowTwo, #rowThree, #rowFour, #rowFive'); 
    var columns = [columnOne, columnTwo, columnThree, columnFour, columnFive]; 
    $('li').on('click', 'a', function() { 
     var $this = $(this); 

     var foo = $this.text(); 
     var qstns = columns[$this.closest('li').index()]; 
     $("#clueContainer").text(qstns[foo]); 
    }); 

    /***makes the main screen disappear and the new DIV appear***/ 
    $("#container").click(function(){ 
     $("#container").hide(function(){ 
      $("#clueContainer").show(function(){ 
      }); 
     }); 
    }); 

    /***makes the new DIV disappear and the main screen reappear***/ 
    $("#clueContainer").click(function(){ 
     $("#clueContainer").hide(function(){ 
      $("#container").show(function(){ 
      }); 
     }); 
    }); 
}); 

Демо: Fiddle

+0

Это работает, однако мне хотелось бы, чтобы в DIV появился только вопрос: «500»: «Почему бы региональные тенденции торговли важны? »хотели бы« Почему региональные торговые модели важны? », чтобы появиться только. – justLearning

+1

@justLearning Что вы подразумеваете под * только вопрос, который должен появиться в DIV *? –

+0

@justLearning: Если вы хотите показать текст в, например, 'columnOne', вы сделали бы это, извлекая текст из объекта с помощью созданных вами имен свойств. Например: 'var question = columnOne ['$ 100'];' дает вам строку ''На мировой политической карте, где были некоторые из основных государств и империй, расположенных около 1500 г. н.э. (CE)?" –

2

Сначала необходимо удалить эти запятые в вашей .text() функции, то используйте метод JSON.stringify() для печати этих объектов.

Ваша функция должна выглядеть так:

$("#clueContainer").text(JSON.stringify(columnOne) + 
    JSON.stringify(columnTwo) + 
    JSON.stringify(columnThree) + 
    JSON.stringify(columnFour) + 
    columnFive[foo]); 

Вы также можете обратиться к this StackOverflow вопрос.

Смежные вопросы