引导模板 - 更改投资组合的文本

好，我下载了这个引导模板 - 自由职业者： https://blackrockdigital.github.io/startbootstrap-freelancer/引导模板 - 更改投资组合的文本

我改变了一些东西，但主要的代码仍然存在。这是页面的外观： 当你点击任何的三张牌（HTML或PHP或Android）它显示的图片和标题行，但课程的描述是错误，它始终是html文本。

我试图改变：

// Popup initialization 
var popup = new Popup(); 
popup.setContent(htmlText); 

var popup2 = new Popup(); 
popup.setContent(phpText); 

var popup3 = new Popup(); 
popup.setContent(androidText); 

var modal = new Modal("modal", popup); 

var modal2 = new Modal("modal", popup2); 

var modal3 = new Modal("modal", popup3);

我也试过在弹出添加此：

// Popup initialization 
var popup = new Popup(); 
if(popup.title=="Android"){ 
    popup.setContent(androidText); 

};

这没有奏效。

如何为每个弹出窗口设置不同的描述？

这是一个完整的HTML：

<!DOCTYPE html> 
<html> 

<head> 
    <title>Team Logic Education Center</title> 

    <!-- Support for Serbian Latin --> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

    <!-- Font Awesome Icons --> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 

    <!-- Google font: Montserrat (400, 500, 600, 700) --> 
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700" rel="stylesheet"> 

    <!-- Google font: Lato (400, 700) --> 
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet"></head> 

    <!-- Body CSS --> 
    <link href="css/body.css" rel="stylesheet"> 

    <!-- Header CSS and JS --> 
    <link href="css/header.css" rel="stylesheet"> 
    <script src="js/header.js"></script> 

    <!-- Content CSS --> 
    <link href="css/content.css" rel="stylesheet"> 

    <!-- Section CSS --> 
    <link href="css/section.css" rel="stylesheet"> 

    <!-- Course CSS and JS --> 
    <link rel="stylesheet" href="css/course.css"> 
    <script src="js/coursebox.js"></script> 

    <!-- Contact CSS and JS --> 
    <!-- <link href="css/contact.css" rel="stylesheet"> 
    <script src="js/contact.js"></script> --> 

    <!-- Modal CSS and JS --> 
    <link href="css/modal.css" rel="stylesheet"> 
    <script src="js/modal.js"></script> 

    <!-- Popup CSS and JS --> 
    <link href="css/popup.css" rel="stylesheet"> 
    <script src="js/popup.js"></script> 

    <!-- Data --> 
    <script src="js/data.js"></script> 

</head> 

<body> 

<!-- Header --> 
<div id="header"> 
    <!-- Content inserted via JS --> 
</div> 

<!-- Popup window (which is modal) --> 
<div id="modal"> 
    <!-- Content inserted via JS --> 
</div> 

<div class="content"> 

    <!-- In-page link for logo section --> 
    <a class="inlink" id="pocetna"></a> 

    <!-- Logo section --> 
    <div class="section green"> 
    <img class="logo" src="Images/TL.png"> 
    <h1>Team Logic Education Center</h1> 
    </div> 

    <!-- In-page link for course section --> 
    <a class="inlink" id="kursevi"></a> 

    <!-- Course section --> 
    <div class="section white"> 
    <h1>Kursevi</h1> 
    <hr> 
    <div id="courseBox"> 
     <!-- Content inserted via JS --> 
    </div> 
    </div> 

    <!-- In-page link for about section --> 
    <a class="inlink" id="onama"></a> 

    <!-- About section --> 
    <div class="section green"> 
    <h1>O Nama</h1> 
    <hr> 
    <p id="content" class="columns" style="max-width: 600px; margin: auto"> 
     <!-- Content inserted via JS --> 
    </p> 
    </div> 

    <!-- In-page link for prices section --> 
    <a class="inlink" id="cenovnik"></a> 

    <!-- Prices section --> 
    <div class="section bluePrice"> 
    <h1>Cenovnik</h1> 
    <hr> 
    <p id="contentCenovnik" class="columns" style="max-width: 600px; margin: auto"> 
     <table align="center" style="font-family: Montserrat;"> 
     <tr style="color:white; background-color: #17222c;"> 
      <td>Kurs</td> 
      <td>Cena</td> 
      <td>Vreme trajanja</td> 
     </tr> 
     <tr> 
      <td>HTML + CSS + JS </td> 
      <td>100&euro;</td> 
      <td>90 min/1 mesec</td> 
     </tr> 
     <tr> 
      <td>PHP</td> 
      <td>100&euro;</td> 
      <td>90 min/1 mesec</td> 
     </tr> 
     <tr> 
      <td>Android</td> 
      <td>150&euro;</td> 
      <td>90 min/1 mesec</td> 
     </tr> 
     </table> 
    </p> 
    </div> 

    <!-- In-page link for contact section --> 
    <a class="inlink" id="kontakt"></a> 

    <!-- Contact section --> 
    <div class="section white"> 
    <h1>Kontakt</h1> 
    <hr> 

    <div style="font-family: Lato; font-size: 20px; color: #2C3E50; max-width: 600px; margin: auto"> 
     <div style="float:left;"> <img src="Images/MSG.png" style="vertical-align: middle;"> <span style="vertical-align: middle;"> [email protected] </span> </div> 
     <div style="float:right;"><img src="Images/MOB.png" style="vertical-align: middle;"> <span style="vertical-align: middle;"> +381 (0)63 44 21 56 </span> </div> 
    </div> 

    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 

    <div id="map" style="width:100%;height:400px"> 

    </div> 

    <!-- Information section --> 
    <!-- <div class="section lightBlue"> 
    </div> --> 

    <!-- Footer section --> 
    <div class="section darkBlue"> 
    <footer> 
     <a href="https://www.facebook.com/TeamLogicComputers/"> Facebook </a>&nbsp; | &nbsp; <a href="https://www.linkedin.com/in/nemanja-jovanovic-1a769b143"> Linkedin </a>&nbsp; | &nbsp; <a href="skype:jovanovic.108?userinfo"> Skype </a><br> 
     © 2017 TeamLogic. Sva prava zadržana. 

    </footer> 
    </div> 

</div> 

</body> 

<script> 

// Header initialization (using data.js) 
var header = new Header("header"); 
for(var i = 0; i < links.length; i++) { 
    header.addLink(
    links[i].text, 
    links[i].href, 
    links[i].className 
); 
} 

// Popup initialization 
var popup = new Popup(); 
popup.setContent(htmlText); 

// var popup2 = new Popup(); 
// popup.setContent(lorem); 
// 
// var popup3 = new Popup(); 
// popup.setContent(phpText); 

var modal = new Modal("modal", popup); 
// 
// var modal2 = new Modal("modal", popup2); 
// var modal3 = new Modal("modal", popup3); 

// Course box initialization (using data.js) 
var courseBox = new CourseBox("courseBox"); 
for(var i = 0; i < courseItems.length; i++) { 
    courseBox.addItem(
    courseItems[i].text, 
    courseItems[i].color 
); 
} 

courseBox.setCallback(function (text, color) { 
    popup.setTitle(text); 
    popup.setCaption(text); 
    popup.setCaptionBgColor(color); 
    modal.open(); 
}); 

// About section initialization (using data.js) 
var content = document.getElementById("content"); 
content.innerHTML = lorem; 

// Prices section initialization (using data.js) 
// var contentCenovnik = document.getElementById("contentCenovnik"); 
// contentCenovnik.innerHTML = cene; 

// Google map 
function myMap() { 
    var myCenter = new google.maps.LatLng(43.332859, 21.908850); 
    var mapCanvas = document.getElementById("map"); 
    var mapOptions = {center: myCenter, zoom: 15}; 
    var map = new google.maps.Map(mapCanvas, mapOptions); 
    var marker = new google.maps.Marker({position:myCenter}); 
    marker.setMap(map); 
} 

</script> 
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script> 
</body> 

</html>

这是popup.js：

function Popup() { 

    var self = this; 

    self.callback = null; 

    self.setTitle = function (title) { 
    self.popupTitle.innerHTML = title; 
    } 

    self.setCaption = function (caption) { 
    self.imgBoxCap.innerHTML = caption;  
    } 

    self.setCaptionBgColor = function (bgColor) { 
    self.imgBoxCap.style.backgroundColor = bgColor;  
    } 

    self.setContent = function (content) { 
    self.popupContent.innerHTML = content;  
    } 

    self.open = function() { 
    self.container.className = "popup"; 
    } 

    self.close = function() { 
    self.container.className = "popup zoomOut"; 
    } 

    self.onClose = function() { 
    if (self.callback != null) { 
     self.callback(); 
    } 
    } 

    self.setCallback = function(callback) { 
    self.callback = callback; 
    } 

    self.crossItem = document.createElement("div"); 
    self.crossItem.className = "cross"; 
    self.crossItem.addEventListener("click", self.onClose); 
    self.crossItem.innerHTML = "&times;"; 

    self.crossBox = document.createElement("div"); 
    self.crossBox.className = "crossBox"; 
    self.crossBox.appendChild(self.crossItem); 

    self.popupTitle = document.createElement("div"); 

    self.bar = document.createElement("div"); 
    self.bar.className = "bar"; 
    self.bar.appendChild(self.popupTitle); 
    self.bar.appendChild(self.crossBox); 

    self.imgBoxCap = document.createElement("div"); 
    self.imgBoxCap.className = "imgBoxCap"; 

    self.imgBox = document.createElement("div"); 
    self.imgBox.className = "imgBox"; 
    self.imgBox.appendChild(self.imgBoxCap); 

    self.popupContent = document.createElement("p"); 

    self.middle = document.createElement("div"); 
    self.middle.className = "middle"; 
    self.middle.appendChild(self.imgBox); 
    self.middle.appendChild(self.popupContent); 

    self.container = document.createElement("div"); 
    self.container.className = "popup none"; 
    self.container.appendChild(self.bar); 
    self.container.appendChild(self.middle); 
}

也试过这样：

// Popup initialization 
var popup = new Popup(); 
if(CourseBox.text=="Android"){ 
    popup.setContent(phpText); 
} else { 
    popup.setContent(htmlText); 
};

但现在每介绍phpText。 ..

来源

2017-08-15 IkePr

固定在：

courseBox.setCallback(function (text, color) { 
    console.log(text); 
    popup.setTitle(text); 

    //HERE 
    if (text=="HTML + CSS + JS") { 
    popup.setCaption(text); 
    popup.setContent(htmlText); 
    } else if(text=="PHP") { 
    popup.setCaption(text); 
    popup.setContent(phpText); 
    } else { 
    popup.setCaption(text); 
    popup.setContent(androidText); 
    }; 

    popup.setCaptionBgColor(color); 
    modal.open(); 
});

来源

2017-08-15 11:49:22 IkePr

引导模板 - 更改投资组合的文本

回答

相关问题