Fatal编程技术网
  • javascript/
  • Javascript 创建要反复调用的函数

Javascript 创建要反复调用的函数

javascript jquery html css

Javascript 创建要反复调用的函数,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想创建一个简单的文本游戏，你总是有两个选择，根据你的选择，一些东西会显示出来，而当前的内容会消失。我的问题是每种选择都是不同的，所以我无法找到一种不在javascript代码中一次又一次重复自己的方法 HTML: <!Doctype html> <html> <head> <script type="text/javascript" src="jquery-2.1.4.min.js"></script> <li

我想创建一个简单的文本游戏，你总是有两个选择，根据你的选择，一些东西会显示出来，而当前的内容会消失。我的问题是每种选择都是不同的，所以我无法找到一种不在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>
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);
您可以尝试类似于
performation（e，#getup'）-在本例中，是一种带有参数的通用方法

请参阅以下代码：

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>



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



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


JS:


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



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



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



您可以尝试类似于
performation（e，#getup'）-在本例中，是一种带有参数的通用方法

请参阅以下代码：

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>



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



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


JS:


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



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



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



我假设这个问题必须像您的示例一样用html定义。还有很多其他方法可以做得更好

您可以使用类名指定下一个问题



document.addEventListener（'click'，函数（e）{
var目标=e.target；
if（target.className.match（'answer'））{
var nextQuestionId=target.className.replace（'answer'，''）；
HidealStoryCards（）；
showStoryCard（nextQuestionId）；
}
});
函数HIDEALSTORYCARDS（）{
var i，elm，elms=document.getElementsByClassName（'storyCard'）；
对于（i=0；i


你饿了吗


是


否

一些东西


一个馅饼



一些东西


再见


再见


我假设这个问题必须像您的示例一样用html定义。还有很多其他方法可以做得更好

您可以使用类名指定下一个问题



document.addEventListener（'click'，函数（e）{
var目标=e.target；
if（target.className.match（'answer'））{
var nextQuestionId=target.className.replace（'answer'，''）；
HidealStoryCards（）；
showStoryCard（nextQuestionId）；
}
});
函数HIDEALSTORYCARDS（）{
var i，elm，elms=document.getElementsByClassName（'storyCard'）；
对于（i=0；i


你饿了吗


是


否

一些东西


一个馅饼



一些东西


再见


再见


您需要将数据与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);


您的“控制台”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);


您可能会将您的故事设置为在线：


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"]);
}



您需要将数据与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);


您的“控制台”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);


您可能会将您的故事设置为在线：


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"]);
}



请澄清您不想在示例中重复的代码是什么？对不起。隐藏的部分。e、 target.parentNode.style.display='none'我尝试在当前函数内创建函数，但不起作用。像var hide=function（）{e.target.parentNode.style.display='none'；}我认为更好的方法是创建一个包含所有状态的多维数组和一个函数，该函数将返回指定状态的下一个状态。请澄清您不希望在示例中重复的代码。对不起。隐藏的部分。e、 target.parentNode.style.display='none'我尝试在当前函数内创建函数，但不起作用。像var hide=function（）{e.target.parentNode.style.display='none'；}我认为更好的方法是创建一个包含所有状态的多维数组和一个将返回指定状态的下一个状态的函数。谢谢。我真正需要的是一种新的逻辑。我会尝试一下，希望我不会再遇到谷歌无法解决的麻烦。谢谢。我真正需要的是一种新的逻辑。我会尝试一下，希望我不会再遇到谷歌无法解决的麻烦，但只能部分解决。它只隐藏当前内容，之后不显示任何内容。我试过类似的方法，效果也很相似。谢谢你的帮助，虽然这是有效的，但只是部分有效。它只隐藏当前内容，之后不显示任何内容。我试过类似的方法，效果也很相似。谢谢你的帮助