2016-06-21 79 views
-3

我使用以下Javascript來製作一種用戶通過一組問題點擊的流程圖。對於某些回覆,我想鏈接到可以找到更多信息的外部網站。我如何添加這些鏈接?如何在javascript中添加鏈接

HTML 
<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    </head> 
    <body> 

    <div class="wrapper"> 
     <div class="container"> 
     <div class="row"> 
      <div class="col-xs-12 text-right"> 
      <button class="btn btn-default btn-corner" type="submit" data-bind="click: startOver, visible: queryData().id > 0">Start over</button> 
      </div> 
     </div> 
     </div> 

     <div class="container main"> 
     <div class="row"> 
      <div class="c12 text-center"> 
      <h1 data-bind="text: queryData().text"></h1> 
      <h3 data-bind="text: queryData().subhead"></h3> 
      <div class="option-group" data-bind="foreach: queryData().answers"> 
       <button class="btn btn-default btn-lg" type="submit" data-bind="click: $parent.goToTarget, text: text"></button> 
      </div> 
      <button class="btn btn-default" type="submit" data-bind="click: stepBack, visible: navHistory().length > 1">Previous Step</button> 
      </div> 
     </div> 
     </div> 
     <div class="push"></div> 
    </div> 


    <script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script> 
    <script src="app.js?v=0.4.0"></script> 

    <script> 
    </script> 
    </body> 
</html> 

的JavaScript如下:

JS

var queries = [{ 
id: 0, 
text: "Where to start?", 
answers: [{ 
text: "Let's Begin!", 
target: 1 
}] 
}, { 
id: 1, 
text: "Which genre do you want to start in?", 
    answers: [{ 
    text: "Fantasy", 
    target: 100 
    }, { 
     text: "SciFi", 
     target: 2 
    }, { 
     text: "Neither", 
     target: 59 
    }] 
    }, { 
    id: 2, 
    text: "It's huge but it's worth it. The Cryptonomicon by Neal Stephenson", 
    answers: [{ 
    text: "Amazon.co.uk", 
    target: "_blank" 
    }, { 
    text: "Amazon.com" 
    }] 
}]; 




function QueryViewModel() { 
    var self = this; 

    self.querySet = ko.observable(); 
    self.currentStep = ko.observable(); 
    self.queryData = ko.observable(); 
    self.sfw = ko.observable(); 
    self.navHistory = ko.observableArray(); 

    // Operations 
    self.goToTarget = function(obj) { 
    self.navHistory.push(self.currentStep()); 
    self.currentStep(obj.target); 
    self.queryData(self.querySet()[obj.target]); 
} 

    self.startOver = function() { 
    self.navHistory.removeAll(); 
    self.goToTarget({target: 0}); 
    } 

    self.stepBack = function() { 
    var lastStep = self.navHistory().length > 1 ? self.navHistory.pop() : 0; 
    self.currentStep(lastStep); 
    self.queryData(self.querySet()[lastStep]); 
    } 

    var paramsString = document.location.hash.substring(1); 
    var params = new Array(); 
    if (paramsString) { 
    var paramValues = paramsString.split("&"); 
    for (var i = 0; i < paramValues.length; i++) { 
    var paramValue = paramValues[i].split("="); 
    params[paramValue[0]] = paramValue[1]; 
} 
    } 

    params ? paramTarget = params['target'] : params = []; 


    self.sfw() ? self.querySet(queriesSFW) : self.querySet(queries); 
    if (paramTarget) { 
    self.navHistory.push(0); 
    self.currentStep(0); 
    self.goToTarget({target: paramTarget}) 
    } else { 
    self.goToTarget({target: 0}); 
    } 
} 

ko.applyBindings(new QueryViewModel()); 
+3

這只是json數據部分。請使用您正在使用的html和js更新問題。 –

+3

@AndrewL。這不是'json',它是一個對象字面值:P –

+0

@william clarke you * do *意識到這個'var self = this;'是無稽之談?您在關閉括號'}後繼續引用它。我不明白這一點。在瀏覽器中,'self'是'window'對象,但我不確定這是否是您想要的代碼。 – Azamantes

回答

-1

添加你的鏈接像對象:

text: "Fantasy", 
link: "http://www.stackoverflow.com", 
target: 2 

現在,當你需要去鏈接,使用此功能:

var link = obj.link; 
window.open(link, "_blank"); 
+0

如何調用該功能? – will

+0

Window.open是函數。輸入! – shash7

3

在HTML中,你可以做這樣的事情:

<button type="button" onclick="window.open('https://google.com/', '_self')">Button</button> 

你不必使用一個按鈕,不同的元素可以使用onclick像文本或圖像。這也可以調用js函數,只需將函數名稱放在「window.open ...」的位置。

課程標準的方式來做到這一點是

<a href='https://www.google.com/'>Link</a> 

你可以在這裏使用JS做法:http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_inner_html 這裏更多地瞭解它:http://www.w3schools.com/js/js_intro.asp

我不知道你爲什麼會告訴我們用於打開指向另一個頁面的鏈接的JSON。除非我誤解。這種基本信息可以通過快速的Google搜索找到。