相同的功能，不同的随机结果 - jQuery答案

【问题标题】：Same functions, different random results - jQuery相同的功能，不同的随机结果 - jQuery
【发布时间】：2018-07-01 16:52:35
【问题描述】：

假设我有一个单词数组

var fruit = [banana, apple, watermelon, mango];

function loadFruit() {
    var randomFruit = fruit[Math.floor(Math.random() * fruit.length)];
    $('.divLoadFruit').parent('div').html(randomFruit);
};

我需要点击句子中间的词触发函数，以获得不同的随机匹配

HTML

"You need to eat <a class="divLoadFruit" href='javascript: loadFruit();'>just_some_fruit</a>: it is good for your health."

"My son doesn´t like <a class="divLoadFruit" href='javascript: loadFruit();'>another_fruit_here</a>."

当您单击其中一个链接时，它会触发相同的功能（显然），但会在该空间中得到相同的结果。有没有办法让它随机而不重复？

【问题讨论】：

随机不重复？那并不是真正的随机。每次您“随机”选择一个项目时，您再次获得相同项目的几率相同
Javascript: How to efficiently randomly select array item without repeats的可能重复
请修复您的 HTML：divLoadFruit 类应用在哪里？
问题是您使用 jQuery 并且 $('.divLoadFruit').parent('div') 定位多个目标 - 您需要重新考虑，也许 loadFruit(this) 将点击的 <a> 元素传递给函数 - 从您的HTML 什么是你的 jQuery 的目标

标签： javascript jquery arrays function random

【解决方案1】：

考虑到你点击了锚标签并得到了一个随机的水果，下面的代码就可以了。

var fruit = ['banana', 'apple', 'watermelon', 'mango'];

function loadFruit(id) {
    var randomFruit = fruit[Math.floor(Math.random() * fruit.length)];
document.getElementById(id).innerHTML = randomFruit;
};

You need to eat <a id='just_some_fruit' href='javascript: loadFruit("just_some_fruit");'>just_some_fruit</a>: it is good for your health.

My son doesn´t like <a id='another_fruit_here' href='javascript: loadFruit("another_fruit_here");'>another_fruit_here</a>.

【讨论】：

【解决方案2】：

这是 jquery 的一种方法。

var fruit = ["banana", "apple", "watermelon", "mango"];

function loadFruit(caller) {
  var randomFruit = fruit[Math.floor(Math.random() * fruit.length)];
  $(caller).html(randomFruit);
};

$('a').click(function() {
  loadFruit(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<div>
  "You need to eat <a href='#'>just_some_fruit</a>: it is good for your health." "My son doesn´t like <a href='#'>another_fruit_here</a>."
</div>

希望对您有所帮助！

【讨论】：

就是这样，谢谢！