Jquery - 函数未加载

时间：2018-01-25 18:53:02

标签： javascript jquery html function

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

  1. D20的第一个功能很棒！除外，当它返回结果为12.图像不加载。我检查过，图像在那里，路径似乎正确，但它只是不识别它......为什么会这样？

  2. 我认为自从第一个工作以来我可以使用相同的代码并重命名变量以与新模具相对应...我这样做但是当我点击任何其他骰子滚轮时它们不会运行

  3. jQuery是用于此示例的最佳语言吗？有没有办法简化我的代码？由于我必须为每个模具引用一组不同的图像，我不知道如何解决这个问题。

    4. $(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>

2 个答案:

答案 0 :(得分：0)

您不能使用在其外部的函数内声明的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>

答案 1 :(得分：0)

回答你的问题：

  1. 您的twelvth Kurts-MacBook-Pro:rest-framework-tutorial kurtpeek$ python manage.py test Creating test database for alias 'default'... System check identified no issues (0 silenced). . ---------------------------------------------------------------------- Ran 1 test in 0.259s OK Destroying test database for alias 'default'... 代码（<img>）
    2. 中有拼写错误
  2. 您正在复制ID并且还有额外的ID。
  3. 使用jQuery很好，但这只是我的意见。您可以将所有<imd>来电合并为一个，如下所示。另外，还有一些方法可以重构代码以减少代码，但为此您可能需要访问codereview.stackexchange.com
  4. 您还需要声明您在许多document.ready调用之外使用的一些变量，因为它们的范围受到限制，但是通过将document.ready的使用减少到一个实例并且首先声明这些变量，你摆脱了另一个问题。

    5. 修正：

    ＆＃13;
    ＆＃13; 
    document.ready
    ＆＃13; 
    $(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);
});
    ＆＃13; 
    <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>
    ＆＃13;
    ＆＃13;
    ＆＃13;

相关问题
最新问题