Создание функции для вызова снова и снова

Я хочу создать простую текстовую игру с вариантами выбора, где у вас всегда есть два варианта, и в зависимости от вашего выбора что-то отображается, а текущий контент исчезает. Моя проблема заключается в том, что каждый из вариантов отличается, поэтому я не могу понять, как не повторять себя снова и снова в javascript-коде.Создание функции для вызова снова и снова

HTML:

<!Doctype html> 
<html> 
<head> 

    <script type="text/javascript" src="jquery-2.1.4.min.js"></script> 
    <link rel="stylesheet" href="style.css" type="text/css"/> 

    <title>Game</title> 
</head> 
    <body> 
    <div id="console"> 
     <div class="storyCard" id="start"> 
      <p class="q">Some stuff. 
      <p class="a">getup</p> 
      <p class="a">sleep</p> 
     </div> 
     <div class="storyCard" id="getup"> 
      <p class="q">Something happened</p> 
      <p class="a">do this</p> 
      <p class="a">do that</p> 
     </div> 
     <div class="storyCard" id="sleep"> 
      <p class="q">something else happened</p> 
      <p class="a">do something</p> 
      <p class="a">do something else</p> 
     </div> 
     <!--and there will be a lot of such storyCards based on the choices.-->  
</div> 
    <script type="text/javascript" src="js.js"></script> 
</body> 
</html>

CSS:

body { 
    margin: 0 auto; 
    align-content: center; 
    font-family: 'Open Sans', sans-serif; 
    font-weight: 400; 
} 
#console { 
    width: 100%; 
} 

.storyCard { 
    min-width: 100px; 
    max-width: 600px; 
    background-color: rgba(0, 0, 0, 0.51); 
    box-shadow: 1px 1px 7px; 
    padding: 50px; 
    color: white; 
    margin: 0 auto; 
    border-radius: 4px; 
    display: none; 
} 
#start { 
    display: block; 
} 
.storyCard .a { 
    background-color: dodgerblue; 
    border-bottom-color: dodgerblue; 
    border-top-color: white; 
    border-left-color: white; 
    border-right-color: dodgerblue; 
    padding: 10px; 
    text-align: center; 
    color: white; 
    width: 30%; 
    display: inline; 
    margin: 0 auto; 
    box-shadow: 1px 1px 7px black; 
    float: right; 
    cursor: pointer; 
} 
.storyCard .a:hover { 
    background-color: white; 
    color: black; 
} 
}

Javascript:

document.querySelector('#console').addEventListener('click', function (e) { 
    var answer = e.target.textContent; 
    switch (answer) { 
     case 'getup': 
      e.target.parentNode.style.display = 'none'; 
      document.querySelector('#getup').style.display = 'block'; 
      break; 
     case 'sleep': 
      e.target.parentNode.style.display = 'none'; 
      document.querySelector('#sleep').style.display = 'block'; 
      break; 
     case 'do this': 
      e.target.parentNode.style.display = 'none'; 
      /*display another content like above*/ 
     case 'do that': 
      /*hide the current content again and display another content and add more cases*/ 

}, false);

источник

2016-03-15 Vivek Tiwari

Просьба уточнить, какой именно код вы не хотите повторять в своем примере? – zhekaus

Извините. Сокрытие. e.target.parentNode.style.display = 'none' –

Я попытался создать функцию внутри текущей функции, но она не работает. Как и var hide = function() {e.target.parentNode.style.display = 'none';} –

Я предполагаю, что вопрос должен быть определен в html как ваш образец. Есть много других способов сделать это лучше.

Вы можете использовать имя класса, чтобы указать следующий вопрос.

document.addEventListener('click', function (e) { 
 
    var target = e.target; 
 
    if (target.className.match('answer')) { 
 
    var nextQuestionId = target.className.replace('answer ', ''); 
 
    hideAllStoryCards(); 
 
    showStoryCard(nextQuestionId); 
 
    } 
 
}); 
 

 
function hideAllStoryCards() { 
 
    var i, elm, elms = document.getElementsByClassName('storyCard'); 
 
    for (i = 0; i < elms.length; i++) { 
 
    elm = elms[i]; 
 
    elm.style.display = 'none'; 
 
    } 
 
} 
 

 
function showStoryCard (id) { 
 
    var storyCard = document.getElementById(id); 
 
    storyCard.style.display = 'block'; 
 
} 
 

 
hideAllStoryCards(); 
 
showStoryCard('first-question');

<div id="console"> 
 
    <div class="storyCard" id="first-question"> 
 
    <p class="q">Are you hungry?</p> 
 
    <p class="answer what-do-you-want-to-eat">yes</p> 
 
    <p class="answer may-i-help-you">no</p> 
 
    </div> 
 
    <div class="storyCard" id="what-do-you-want-to-eat"> 
 
    <p class="q">Some stuff.</p> 
 
    <p class="answer NEXT_QUESTION_ID">a pie</p> 
 
    <p class="answer ANOTHER_QUESTION_ID">a buger</p> 
 
    </div> 
 
    <div class="storyCard" id="may-i-help-you"> 
 
    <p class="q">Some stuff.</p> 
 
    <p class="answer NEXT_QUESTION_ID">bye</p> 
 
    <p class="answer ANOTHER_QUESTION_ID">bye again</p> 
 
    </div> 
 
</div>

источник

2016-03-15 06:09:12 yujuiting

спасибо. новая логика была тем, что мне действительно нужно. я попробую это, и будем надеяться, что у меня не возникнут проблемы. Google не может решить –

Вы можете попробовать что-то вроде performAction(e, '#getup'); - обобщенный метод с параметрами, в этом link.

Пожалуйста, изучите приведенные ниже код:

HTML:

<div id="console"> 
    <div class="storyCard" id="start"> 
    <p class="q">Some stuff.</p> 
    <p class="a">getup</p> 
    <p class="a">sleep</p> 
    </div> 
    <div class="storyCard" id="getup"> 
    <p class="q">Something happened</p> 
    <p class="a">do this</p> 
    <p class="a">do that</p> 
    </div> 
    <div class="storyCard" id="sleep"> 
    <p class="q">something else happened</p> 
    <p class="a">do something</p> 
    <p class="a">do something else</p> 
    </div> 
    <!--and there will be a lot of such storyCards based on the choices.--> 
</div>

CSS:

body { 
    margin: 0 auto; 
    align-content: center; 
    font-family: 'Open Sans', sans-serif; 
    font-weight: 400; 
} 

#console { 
    width: 100%; 
} 

.storyCard { 
    min-width: 100px; 
    max-width: 600px; 
    background-color: rgba(0, 0, 0, 0.51); 
    box-shadow: 1px 1px 7px; 
    padding: 50px; 
    color: white; 
    margin: 0 auto; 
    border-radius: 4px; 
    display: none; 
} 

#start { 
    display: block; 
} 

.storyCard .a { 
    background-color: dodgerblue; 
    border-bottom-color: dodgerblue; 
    border-top-color: white; 
    border-left-color: white; 
    border-right-color: dodgerblue; 
    padding: 10px; 
    text-align: center; 
    color: white; 
    width: 30%; 
    display: inline; 
    margin: 0 auto; 
    box-shadow: 1px 1px 7px black; 
    float: right; 
    cursor: pointer; 
} 

.storyCard .a:hover { 
    background-color: white; 
    color: black; 
}

JS:

document.querySelector('#console').addEventListener('click', function(e) { 
    var answer = e.target.textContent; 
    switch (answer) { 
    case 'getup': 
     performAction(e, '#getup'); 
     break; 
    case 'sleep': 
     performAction(e, '#sleep'); 
     break; 
    case 'do this': 
     performAction(e, '#getup'); /**Use any 'id' or target of your choice.*/ 
     /*display another content like above*/ 
     break; 
    case 'do that': 
     performAction(e, '#getup'); /*Use any 'id' or target of your choice.*/ 
     /*hide the current content again and display another content and add more cases*/ 
     break; 
    } 
}, false); 

function performAction(event, target) { 
    event.target.parentNode.style.display = 'none'; 
    document.querySelector(target).style.display = 'block'; 
}

источник

2016-03-15 06:05:55 Shashank

это работает, но частично. он только скрывает текущий контент, после этого ничего не отображает. Я попробовал что-то подобное, и он сработал. спасибо за помощь, хотя –

@Vivek, счастливое кодирование !!! – Shashank

Вы должны отделить ваши данные от вашего пользовательского интерфейса.

Ваши данные могут быть что-то простое, как это:

var stories; 

function StoryCard(q, option1, option2) { 
    this.q = q 
    this.option1 = option1; 
    this.option2 = option2; 
} 

function displayStory(storyCard) { 
    document.getElementById('q').innerHTML = storyCard.q; 
    document.getElementById('option1').innerHTML = storyCard.option1; 
    document.getElementById('option2').innerHTML = storyCard.option2; 
}

Ваш «Консоль» UI может изменить что-то больше, как это:

<div id="console"> 
    <div class="storyCard" id="start"> 
     <p class="q" id="q">&nbsp;</p> 
     <p class="a" id="option1">&nbsp;</p> 
     <p class="a" id="option2">&nbsp;</p> 
    </div> 
</div>

Ваша функция нажмите может быть больше, как это:

document.querySelector('#console').addEventListener('click', function (e) { 
    var answer = e.target.id; 
    switch (answer) { 
     default: // for when they click within the div, but not on an option 
      break; 
     case 'option1': 
     case 'option2': 
      var story = stories[e.target.innerHTML]; 
      if (null != story) { 
       displayStory(story); 
      } 
      break; 
    } 
}, false);

Вы бы установили свои истории, возможно, на перегрузке:

function init() { 
    stories = { "start": new StoryCard("Some stuff", "getup", "sleep") 
       , "getup": new StoryCard("Something happened", "do this", "do that") 
       , "sleep": new StoryCard("something else happened", "do something", "do something else") 
       }; 

    displayStory(stories["start"]); 
}

источник

2016-03-15 06:31:06 Tibrogargan

Создание функции для вызова снова и снова

ответ

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