Как изменить содержимое div с помощью jquery и переменных?

Question

Привет я пытался изменить содержание DIV с помощью JQuery и у меня есть следующая проблема, это мой код:

<div id="pages"> 
    <div id='cssmenu'> 
    <ul id="themenu"> 
    <li class='active'><a href='#'><span>Home</span></a></li> 
    <li class=''><a href='#'><span>Modules</span></a></li> 
    <li class=''><a href='#'><span>Degrees</span></a></li> 
    <li class=''><a href='#'><span>About us</span></a></li> 
</ul> 

В js.js:

var Modules = "<p> 12346 </p>"; 
var Degrees = "<p> degrees </p>"; 

$(document).ready(function() { 
$('ul#themenu li').click(function() { 
    $('li.active').removeClass('active'); 
    $(this).addClass('active'); 
    **$('#content').html(Modules);** 
}); 

То, что я пытаюсь сделать, это внести изменения в контент соответственно с переменной, которая соответствует списку элементов списка ul, если вы можете подумать о лучшем способе сделать это, пожалуйста, дайте мне знать, спасибо заранее, Chris ,

Answer 1

Если я вас понял правильно, вы пытаетесь использовать имя пункта меню, чтобы определить, какой контент использовать. Я хотел бы сохранить его в объекте, как это:

var text = { 
    Modules : "<p> 12346 </p>", 
    Degrees : "<p> degrees </p>" 
}; 

, а затем за клик:

$('ul#themenu li').click(function() { 
    var section = $(this).find("span").text(); 
    $('li.active').removeClass('active'); 
    $(this).addClass('active'); 
    $('#content').html(text[section]); 
}); 

FYI, вероятно, было бы чище не использовать .text() а добавить идентификатор или класс к li и отключайте его.

Answer 2

Ну просто попробуйте:

$('#content').html(Modules); 

Используйте HTML DOM innerHTML Property для изменения содержимого элементов.

Или только с помощью JavaScript и getElementById свойства:

document.getElementById("content").innerHTML=Modules; 

Answer 3

Я считаю, нужно сопоставить данные JS для ваших HTML-элементов каким-то образом. Простым способом является присоединение класса или идентификатора к вашим элементам, чтобы вы могли получить к нему доступ напрямую. В настоящее время он будет включать в себя получение текста вашего тега span, а затем доступ к вашим глобальным данным с использованием этого значения

Использование текущей модели в вашем на функции мыши

var key = $(this).find('span').text(); // Modules 
window[key] // var Modules = "<p> 12346 </p>" 

---

Использование идентификатора и хранения данных в объекте:

<div id="pages"> 
    <div id='cssmenu'> 
    <ul id="themenu"> 
    <li class='active'><a href='#'><span>Home</span></a></li> 
    <li id="Modules" class=''><a href='#'><span>Modules</span></a></li> 
    <li class=''><a href='#'><span>Degrees</span></a></li> 
    <li class=''><a href='#'><span>About us</span></a></li> 
</ul> 

, то вы можете легко получить доступ модулей с помощью идентификаторов $('#Modules')

Если вам нужно сделать щелчки обработки полностью универсален, вы можете создать объект и иметь свойства, соответствующие элементы ид

var DATA = { 
    'Modules': 'darfdsa'; 
} 

HThen по щелчку

DATA[$(this).attr('id')];

Answer 4

См вывод, нажав последнее дерево ссылки, Вы можете сделать что-то вроде этого

var Modules = "<p style='color:red;'> 12346 </p>"; 
 
var Degrees = "<p style='color:green;'> degrees </p>"; 
 
var Aboutus = "<p style='color:yellow;'> About us</p>"; 
 

 
$(document).ready(function() { 
 
$('ul#themenu li').click(function() { 
 
    $('li.active').removeClass('active'); 
 
    $(this).addClass('active'); 
 
    //alert($(this).find('span').text().replace(/\s+/g, "")); 
 
    $('#content').html(window[$(this).find('span').text().replace(/\s+/g, "")]); 
 
}); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="pages"> 
 
    <div id='cssmenu'> 
 
    <ul id="themenu"> 
 
    <li class='active'><a href='#'><span>Home</span></a></li> 
 
    <li class=''><a href='#'><span>Modules</span></a></li> 
 
    <li class=''><a href='#'><span>Degrees</span></a></li> 
 
    <li class=''><a href='#'><span>About us</span></a></li> 
 
</ul> 
 
    <div id="content"></div>