2016-06-21 3 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.

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