Jquery - 未加载的函数[关闭]

Question

我决定尝试通过为多种骰子类型制作骰子来挑战自己； D20, D12,D10,D8,D6,D4 将返回连接到结果的图像。用户可以选择滚动页面上的哪个骰子。我制作的第一个骰子是 D20，所以它有 20 个结果要返回。我有几个问题。

1. 我的第一个功能 D20 效果很好！除了，当它返回 12 的结果时。图像不加载。我检查了，图像在那里，路径似乎正确但它无法识别它......这是为什么？

2. 我认为自从第一个工作正常后，我可以使用相同的代码并重命名变量以与新骰子相对应...我这样做了，但是当我单击任何其他骰子滚轮时，他们没有运行。

3. jQuery 是本示例使用的最佳语言吗？有没有办法简化我的代码？由于我必须为每个骰子引用一组不同的图像，我不知道如何分解它。

$(document).ready(function() {
  $('.rollDice20').on('click', function() {
    var randImage20 = Math.floor(Math.random() * 20) + 1;
    $('.imageGoHere20').html('');
    $('.random20').html(randImage20);
    $('.holder20 img#i' + randImage20).clone().appendTo('.imageGoHere20');
  });
  $('.imageGoHere20').html(randImage20);
});

$(document).ready(function() {
  $('.rollDice10').on('click', function() {
    var randImage10 = Math.floor(Math.random() * 10) + 1;
    $('.imageGoHere10').html('');
    $('.random10').html(randImage10);
    $('.holder10 img#a' + randImage10).clone().appendTo('.imageGoHere10');
  });
  $('.imageGoHere10').html(randImage10);
});

<style type="text/css">.floating-box {
  display: inline-block;
  width: 350px;
  height: 75px;
  margin: 10px;
  border: none;
  text-align: center;
}

img {
  height: 250px;
  width: 195px;
}

.holder20 {
  display: none;
}

.holder10 {
  display: none;
}

</style>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>


<div class='holder20'>
  <img id='i1' src='http://iambesser.me/DA/images/20/1D20.png' />
  <img id='i2' src='http://iambesser.me/DA/images/20/2D20.png' />
  <img id='i3' src='http://iambesser.me/DA/images/20/3D20.png' />
  <img id='i4' src='http://iambesser.me/DA/images/20/4D20.png' />
  <img id='i5' src='http://iambesser.me/DA/images/20/5D20.png' />
  <img id='i6' src='http://iambesser.me/DA/images/20/6D20.png' />
  <img id='i7' src='http://iambesser.me/DA/images/20/7D20.png' />
  <img id='i8' src='http://iambesser.me/DA/images/20/8D20.png' />
  <img id='i9' src='http://iambesser.me/DA/images/20/9D20.png' />
  <img id='i10' src='http://iambesser.me/DA/images/20/10D20.png' />
  <img id='i11' src='http://iambesser.me/DA/images/20/11D20.png' />
  <imd id='i12' src='http://iambesser.me/DA/images/20/12D20.png' />
  <img id='i13' src='http://iambesser.me/DA/images/20/13D20.png' />
  <img id='i14' src='http://iambesser.me/DA/images/20/14D20.png' />
  <img id='i15' src='http://iambesser.me/DA/images/20/15D20.png' />
  <img id='i16' src='http://iambesser.me/DA/images/20/16D20.png' />
  <img id='i17' src='http://iambesser.me/DA/images/20/17D20.png' />
  <img id='i18' src='http://iambesser.me/DA/images/20/18D20.png' />
  <img id='i19' src='http://iambesser.me/DA/images/20/19D20.png' />
  <img id='i20' src='http://iambesser.me/DA/images/20/20D20.png' />
</div>
<div class='holder10'>
  <img id='a20' src='http://iambesser.me/DA/images/10/1D10.png' />
  <img id='a20' src='http://iambesser.me/DA/images/10/2D10.png' />
  <img id='a20' src='http://iambesser.me/DA/images/10/3D10.png' />
  <img id='a20' src='http://iambesser.me/DA/images/10/4D10.png' />
  <img id='a20' src='http://iambesser.me/DA/images/10/5D10.png' />
  <img id='a20' src='http://iambesser.me/DA/images/10/6D10.png' />
  <img id='a20' src='http://iambesser.me/DA/images/10/7D10.png' />
  <img id='a20' src='http://iambesser.me/DA/images/10/8D10.png' />
  <img id='a20' src='http://iambesser.me/DA/images/10/8D10.png' />
  <img id='a20' src='http://iambesser.me/DA/images/10/9D10.png' />
  <img id='a20' src='http://iambesser.me/DA/images/10/10D10.png' />
</div>

<div class='floating-box'>
  <div class='imageGoHere20'></div>
  <p> You Rolled</p>
  <div class='random20'></div>
  <button class='rollDice20'>Roll D20 </button>
</div>

<div class='floating-box'>
  <div class='imageGoHere10'></div>
  <p> You Rolled</p>
  <div class='random10'></div>
  <button class='rollDice10'>Roll D10</button>
</div>

Answer 1

回答您的问题：

1. 您在第十二个 <img> 标签 (<imd>) 中有错字
2. 您在复制 ID 并且还有多余的 ID。
3. 使用 jQuery 很好，但这只是我的意见。您可以将所有document.ready 调用合并为一个，如下所示。此外，还有一些方法可以重构您的代码以减少它，但为此您可能需要访问 codereview.stackexchange.com
4. 您还需要声明您在许多 document.ready 调用之外使用的一些变量，因为它们的范围受到限制，但是通过将 document.ready 的使用减少到仅一个实例并首先声明这些变量，你就解决了另一个问题。

固定：

$(document).ready(function() {
  var randImage20, randImage10, randImage8, randImage6, randImage4;
  $('.rollDice20').on('click', function() {
    randImage20 = Math.floor(Math.random() * 20) + 1;
    $('.imageGoHere20').html('');
    $('.random20').html(randImage20);
    $('.holder20 img#i' + randImage20).clone().appendTo('.imageGoHere20');
  });
  $('.imageGoHere20').html(randImage20);
  $('.rollDice10').on('click', function() {
    randImage10 = Math.floor(Math.random() * 10) + 1;
    $('.imageGoHere10').html('');
    $('.random10').html(randImage10);
    $('.holder10 img#a' + randImage10).clone().appendTo('.imageGoHere10');
  });
  $('.imageGoHere10').html(randImage10);
  $('.rollDice8').on('click', function() {
    randImage8 = Math.floor(Math.random() * 8) + 1;
    $('.imageGoHere8').html('');
    $('.random8').html(randImage8);
    $('.holder8 img#b' + randImage8).clone().appendTo('.imageGoHere8');
  });
  $('.imageGoHere8').html(randImage8);
  $('.rollDice6').on('click', function() {
    randImage6 = Math.floor(Math.random() * 6) + 1;
    $('.imageGoHere6').html('');
    $('.random6').html(randImage6);
    $('.holder6 img#c' + randImage6).clone().appendTo('.imageGoHere6');
  });
  $('.imageGoHere6').html(randImage6);
  $('.rollDice4').on('click', function() {
    randImage4 = Math.floor(Math.random() * 4) + 1;
    $('.imageGoHere4').html('');
    $('.random4').html(randImage4);
    $('.holder4 img#d' + randImage4).clone().appendTo('.imageGoHere4');
  });
  $('.imageGoHere4').html(randImage4);
});

<style type="text/css">.floating-box {
  display: inline-block;
  width: 350px;
  height: 75px;
  margin: 10px;
  border: none;
  text-align: center;
}

img {
  height: 250px;
  width: 195px;
}

.holder20 {
  display: none;
}

.holder12 {
  display: none;
}

.holder10 {
  display: none;
}

.holder8 {
  display: none;
}

.holder6 {
  display: none;
}

.holder4 {
  display: none;
}

</style>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>


<div class='holder20'>
  <img id='i1' src='http://iambesser.me/DA/images/20/1D20.png' />
  <img id='i2' src='http://iambesser.me/DA/images/20/2D20.png' />
  <img id='i3' src='http://iambesser.me/DA/images/20/3D20.png' />
  <img id='i4' src='http://iambesser.me/DA/images/20/4D20.png' />
  <img id='i5' src='http://iambesser.me/DA/images/20/5D20.png' />
  <img id='i6' src='http://iambesser.me/DA/images/20/6D20.png' />
  <img id='i7' src='http://iambesser.me/DA/images/20/7D20.png' />
  <img id='i8' src='http://iambesser.me/DA/images/20/8D20.png' />
  <img id='i9' src='http://iambesser.me/DA/images/20/9D20.png' />
  <img id='i10' src='http://iambesser.me/DA/images/20/10D20.png' />
  <img id='i11' src='http://iambesser.me/DA/images/20/11D20.png' />
  <img id='i12' src='http://iambesser.me/DA/images/20/12D20.png' />
  <img id='i13' src='http://iambesser.me/DA/images/20/13D20.png' />
  <img id='i14' src='http://iambesser.me/DA/images/20/14D20.png' />
  <img id='i15' src='http://iambesser.me/DA/images/20/15D20.png' />
  <img id='i16' src='http://iambesser.me/DA/images/20/16D20.png' />
  <img id='i17' src='http://iambesser.me/DA/images/20/17D20.png' />
  <img id='i18' src='http://iambesser.me/DA/images/20/18D20.png' />
  <img id='i19' src='http://iambesser.me/DA/images/20/19D20.png' />
  <img id='i20' src='http://iambesser.me/DA/images/20/20D20.png' />
</div>
<div class='holder10'>
  <img id='a1' src='http://iambesser.me/DA/images/10/1D10.png' />
  <img id='a2' src='http://iambesser.me/DA/images/10/2D10.png' />
  <img id='a3' src='http://iambesser.me/DA/images/10/3D10.png' />
  <img id='a4' src='http://iambesser.me/DA/images/10/4D10.png' />
  <img id='a5' src='http://iambesser.me/DA/images/10/5D10.png' />
  <img id='a6' src='http://iambesser.me/DA/images/10/6D10.png' />
  <img id='a7' src='http://iambesser.me/DA/images/10/7D10.png' />
  <img id='a8' src='http://iambesser.me/DA/images/10/8D10.png' />
  <img id='a9' src='http://iambesser.me/DA/images/10/9D10.png' />
  <img id='a10' src='http://iambesser.me/DA/images/10/10D10.png' />
</div>
<div class='holder8'>
  <img id='b1' src='http://iambesser.me/DA/images/8/1D8.png' />
  <img id='b2' src='http://iambesser.me/DA/images/8/2D8.png' />
  <img id='b3' src='http://iambesser.me/DA/images/8/3D8.png' />
  <img id='b4' src='http://iambesser.me/DA/images/8/4D8.png' />
  <img id='b5' src='http://iambesser.me/DA/images/8/5D8.png' />
  <img id='b6' src='http://iambesser.me/DA/images/8/6D8.png' />
  <img id='b7' src='http://iambesser.me/DA/images/8/7D8.png' />
  <img id='b8' src='http://iambesser.me/DA/images/8/8D8.png' />
</div>
<div class='holder6'>
  <img id='c1' src='http://iambesser.me/DA/images/6/1D6.png' />
  <img id='c2' src='http://iambesser.me/DA/images/6/2D6.png' />
  <img id='c3' src='http://iambesser.me/DA/images/6/3D6.png' />
  <img id='c4' src='http://iambesser.me/DA/images/6/4D6.png' />
  <img id='c5' src='http://iambesser.me/DA/images/6/5D6.png' />
  <img id='c6' src='http://iambesser.me/DA/images/6/6D6.png' />
</div>
<div class='holder4'>
  <img id='d1' src='http://iambesser.me/DA/images/4/1D4.png' />
  <img id='d2' src='http://iambesser.me/DA/images/4/2D4.png' />
  <img id='d3' src='http://iambesser.me/DA/images/4/3D4.png' />
  <img id='d4' src='http://iambesser.me/DA/images/4/4D4.png' />
</div>

<div class='floating-box'>
  <div class='imageGoHere20'></div>
  <p> You Rolled</p>
  <div class='random20'></div>
  <button class='rollDice20'>Roll D20 </button>
</div>

<div class='floating-box'>
  <div class='imageGoHere10'></div>
  <p> You Rolled</p>
  <div class='random10'></div>
  <button class='rollDice10'>Roll D10</button>
</div>

<div class='floating-box'>
  <div class='imageGoHere8'></div>
  <p> You Rolled</p>
  <div class='random8'></div>
  <button class='rollDice8'>Roll D8</button>
</div>

<div class='floating-box'>
  <div class='imageGoHere6'></div>
  <p> You Rolled</p>
  <div class='random6'></div>
  <button class='rollDice6'>Roll D6</button>
</div>

<div class='floating-box'>
  <div class='imageGoHere4'></div>
  <p> You Rolled</p>
  <div class='random4'></div>
  <button class='rollDice4'>Roll D4</button>
</div>

Answer 2

您不能使用在它们之外的函数内声明的var。

阅读：What is the scope of variables in JavaScript?

您需要将$('.imageGoHereX').html(randImageX); 移动到onClick 函数中。

$(document).ready(function() {
  $('.rollDice6').on('click', function() {
    var randImage6 = Math.floor(Math.random() * 6) + 1;
    $('.imageGoHere6').html('');
    $('.imageGoHere6').html(randImage6);
    $('.random6').html(randImage6);
    $('.holder6 img#c' + randImage6).clone().appendTo('.imageGoHere6');

  });
});

<style type="text/css">.floating-box {
  display: inline-block;
  width: 350px;
  height: 75px;
  margin: 10px;
  border: none;
  text-align: center;
}

img {
  height: 250px;
  width: 195px;
}

.holder6 {
  display: none;
}

</style>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>


<div class='holder6'>
  <img id='c1' src='http://iambesser.me/DA/images/6/1D6.png' />
  <img id='c2' src='http://iambesser.me/DA/images/6/2D6.png' />
  <img id='c3' src='http://iambesser.me/DA/images/6/3D6.png' />
  <img id='c4' src='http://iambesser.me/DA/images/6/4D6.png' />
  <img id='c5' src='http://iambesser.me/DA/images/6/5D6.png' />
  <img id='c6' src='http://iambesser.me/DA/images/6/6D6.png' />
</div>

<div class='floating-box'>
  <div class='imageGoHere6'></div>
  <p> You Rolled</p>
  <div class='random6'></div>
  <button class='rollDice6'>Roll D6</button>
</div>