Question

我正在为项目创建一个“选择你自己的冒险”类型页面，用户从页面上的选项列表中选择多个值，他们的选择会影响页面的其余部分。这是在html / javascript中，但我很高兴采用另一种语言的体面模式，如果有人有一个（或者通过ajax实现服务器端，如果这更容易）。

我目前的解决方案是将所有变量文本括在<span>中，以便代码可以接收它们。但它很难看，尤其是当存在多个重叠变化时。

示例：

html:
<p>Alice was a 
<select id="behave">
  <option value="good">good</option>
  <option value="naughty">naughty</option>
</select> 
<span class="boygirl">girl</span>.
 <span class="plotelement1">
  <span class="HeShe">She</span> was constantly being told off by 
  <span class="hisher">her</span> <span class="mainparent">mother</span>
 </span>.
</p>

js:
function genderChange(){
  var newgender = $("#gender").val();
  if(newgender == "male"){
    $(".heshe").text("he");
    $(".HeShe").text("He");
    $(".himher").text("him");
  } else {
    $(".heshe").text("she");
    $(".HeShe").text("She");
    $(".himher").text("her");
  }
}
function changeBehaviour(){
  switch($("#behave").val()){
  case "good":{
    $(".plotelement1").html('<span class="HeShe">She</span> made <span class="hisher">her</span> parents proud of <span class="himher">her</span> and they told <span class="himher">her</span> all the time how good <span class="heshe">she</span> was.');
    break;
  }
  default:{
    $(".plotelement1").html('<span class="HeShe">She</span> was constantly being told off by <span class="hisher">her</span> <span class="mainparent">mother</span>');
  }
  }
genderChange();
}

请参阅？丑陋而痛苦。我该如何做得更好？

Answer 1

你接近它的方式有点好，但基本上你遇到的问题只是你的Js代码中有错误，更正的是您可以在http://jsfiddle.net/9zeD9/

查看其工作版本

<p>
    <select id="gender">
        <option value="male">male</option>
        <option value="female">female</option>
    </select>
    Alice was a 
    <select id="behave">
        <option value="good">good</option>
        <option value="naughty">naughty</option>
    </select> 
    <span class="boygirl">girl
    </span>. 
    <span class="plotelement1">
        <span class="HeShe">She</span> was constantly being told off by 
        <span class="hisher">her</span> 
        <span class="mainparent">mother</span>
    </span>.
</p>

<script>
function genderChange(){
  var newgender = $("#gender").val();
  if(newgender == "male"){
    $(".heshe").html("he");
    $(".HeShe").html("He");
    $(".himher").html("him");
    $(".hisher").html("his");
  } else {
    $(".heshe").textContent = "she";
    $(".HeShe").textContent = "She";
    $(".himher").textContent = "her";
    $(".hisher").html("her");
  }
}
$(function(){
        changeBehaviour();//      These 2 lines run after loading the whole page.
        genderChange();   //    

    $("#gender").change(function(){
        changeBehaviour();//    Change the behaviours first
        genderChange();   //    Then change the gender as the behaviour code has   
                          //    gender's span like ".hisher" so this has to be the
                          //    order.
    });
    $("#behave").change(function(){
      changeBehaviour();
      genderChange();
    })
});
function changeBehaviour(){
  switch($("#behave").val()){
  case "good":{
    $(".plotelement1").html('<span class="HeShe">She</span> made <span class="hisher">her</span> parents proud of <span class="himher">her</span> and they told <span class="himher">her</span> all the time how good <span class="heshe">she</span> was.');
    break;
  }
  default:{
    $(".plotelement1").html('<span class="HeShe">She</span> was constantly being told off by <span class="hisher">her</span> <span class="mainparent">mother</span>');
  }
}
}
</script>

PS：由于您使用的是Jquery，因此要更改任何标记的内容，

$(".hisher").html("his")

Answer 2

很晚，但我有同样的问题，找不到任何其他答案。我想我会分享我的答案，以防任何人展望未来。如果您取出注释，则为五行，但不可否认，如嵌入if / else或switch case语句那样可读。基于我对Chrome所做的测试，它更快，但我们正在谈论0.0089ms和0.0131ms之间的差异。工作JSFiddle here。

HTML：

<div id="female">
  <p id="HE" ></p>
  <p id="CAPHIS" ></p>
</div>
<div id="male">
  <p id="HIS" ></p>
  <p id="CAPHIM" ></p>
</div>

JS：

function getPronoun(gender, id) {
  // array of pronouns to find
  var pronouns = ["she", "her", "her", "he", "his", "him"];

  // array of the last two letters of incoming pronouns in id parameter
  var ids = ["HE", "IS", "IM"];

  // get the index of the ids array matching the last two letters of id parameter
  var index = ids.indexOf(id.slice(-2));

  // if gender parameter is male, add 3 to the index
  index = gender == 'male' ? index + 3 : index;

  // use index to select the proper pronoun from the pronouns array
  // and capitalize it if CAP is present in the id parameter
  return id.indexOf('CAP') > -1 ?  cap(pronouns[index]) : pronouns[index];
}

function cap(input) {
  return input.charAt(0).toUpperCase() + input.substr(1);
}

警告：您如何从HTML /脚本中提取性别和ID取决于您。这只是演示了一种基于几个变量将通用代词映射到特定代词的方法。

交互式改变性别代词

2 个答案: