Question

我已经发布了一个类似的问题，但这里有不同的问题 Same functions, different random results - jQuery

我还有其他更大的问题，因为我需要从js数组中加载所有内容，并使该数组中的一个单词可单击，并从另一个数组中获取随机结果：

＆＃13;

///  simple arrays with link in the middle

var listArray1 = [
  "<a class='linkLoadIam' href='javascript: loadIam();'>I am</a> engulfed",
  "This is how <a class='linkLoadIam' href='javascript: loadIam();'>I am</a> angry",
  "Just some <a class='linkLoadIam' href='javascript: loadIam();'>I am</a> sentimental",
];

var listArray2 = [
  "Phrase without links",
  "Phrase without links2",
  "Phrase without links3",
];

var listArray3 = [
  "Why <a class='linkLoadIam' href='javascript: loadIam();'>I am</a> hungry",
  "This is how <a class='linkLoadIam' href='javascript: loadIam();'>I am</a> eating",
  "Just some <a class='linkLoadIam' href='javascript: loadIam();'>I am</a> food phrase",
];

/////// starting functions
$('#js-random').click(function() {
  // get random array's
  getRandomArray1 = listArray1[Math.floor(Math.random() * listArray1.length)];
  getRandomArray2 = listArray2[Math.floor(Math.random() * listArray2.length)];
  getRandomArray3 = listArray3[Math.floor(Math.random() * listArray3.length)];


  // loading into div
  $('.getRandomArray1div').html(getRandomArray1);
  $('.getRandomArray2div').html(getRandomArray2);
  $('.getRandomArray3div').html(getRandomArray3);

}); //end click function



///array that i want to call randomly with I am link
var listIam = [
  "<a class='linkLoadIam' href='javascript: loadIam();'>I am</a> the substitute",
  "This is how <a class='linkLoadIam' href='javascript: loadIam();'>I am</a> the phrase is changing",
  "Just some <a class='linkLoadIam' href='javascript: loadIam();'>I am</a> random project.",
];


/// function to load this phrase instead of actual phrase

function loadIam() {
  var randomIam = listIam[Math.floor(Math.random() * listIam.length)];
  $('.linkLoadIam').parent('div').html(randomIam);
};

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<div id="results">
  <div class="getRandomArray1div"></div>
  <div class="getRandomArray2div"></div>
  <div class="getRandomArray3div"></div>
</div>

<div id="js-random"> <a href="#">RANDOM</a> </div>

＆＃13;

它完美无缺，但函数重复相同的字符串，当我点击该单词时，我想要一个字符串。

谁能告诉我另一种方式？上一篇文章没有解决这个问题。谢谢

Answer 1

首先，我建议将jquery版本更改为至少1.7，这样您就可以利用事件委派https://learn.jquery.com/events/event-delegation/

将loadIam函数替换为：

$('#results').bind('click', '.linkLoadIam', function() {
  var randomIam = listIam[Math.floor(Math.random() * listIam.length)];
  $(this).closest('div').html(randomIam);
});

此外，替换所有出现的“javascript：loadIam（）;”用“＃”，如：

var listArray1 = [
  "<a class='linkLoadIam' href='#'>I am</a> engulfed",
  "This is how <a class='linkLoadIam' href='#'>I am</a> angry",
   "Just some <a class='linkLoadIam' href='#'>I am</a> sentimental",
];

var listArray3 = [
  "Why <a class='linkLoadIam' href='#'>I am</a> hungry",
  "This is how <a class='linkLoadIam' href='#'>I am</a> eating",
   "Just some <a class='linkLoadIam' href='#'>I am</a> food phrase",
];

var listIam = [
  "<a class='linkLoadIam' href='#'>I am</a> the substitute",
  "This is how <a class='linkLoadIam' href='#'>I am</a> the phrase is changing",
  "Just some <a class='linkLoadIam' href='#'>I am</a> random project.",
];

具有不同随机结果的相同函数 - jQuery第2部分

1 个答案: