创建一个被一次又一次调用的函数

我想创建一个简单的文本游戏的选择种类，你总是有两个选择，并根据您的选择，显示的东西，当前的内容消失。我的问题是每个选择都不同，所以我不能找出一种方法，不要在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样例一样在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

谢谢。一个新的逻辑是我真正需要的。我会尽力而为，并希望我不会遇到谷歌无法解决的更多麻烦 –

你可以尝试像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

你需要从UI中分离数据。

您的数据可能是这样简单的东西：

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; 
}

你的“控制台”界面可以改变的东西更是这样的：

<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);

你可能会在onload上设置你的故事：

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

创建一个被一次又一次调用的函数

回答

相关问题