jQuery .text() 方法不显示索引项值答案

【问题标题】：jQuery .text() method is not display index item valuejQuery .text() 方法不显示索引项值
【发布时间】：2020-03-28 05:06:15
【问题描述】：

以下代码有问题。
HTML 代码

<head>
<!DOCTYPE html>
<html>
<head>
  <script src="test.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>          
    <div id="div1">
    <h1 id="array-item"></h1>
    <h3 id="index"></h3>
    </div>
</body>
</html>

test.js


var name=['muzaffarpur','madhepura','bihar','patana','delhi','munger'];
var addImg=0;
$(document).ready(function(){
  setInterval(slide, 1230);
});
function slide(){
  if(addImg<=5){
       $('#array-item').text(name[addImg]);
       $('#index').text(addImg);
       addImg++;
  }else addImg=0;
}

预期输出
当addImg=0 时应显示muzaffarpur，当addImg=1 时应显示madhepura，以此类推。输出是muzaffarpur、ie 的不同字符的第一个索引值。

输出

当addImg=0 输出为m，当addImg=1 输出为a，以此类推。

它应该显示索引值，但它在每次迭代时显示第一个索引项的不同字符。

【问题讨论】：

标签： javascript jquery html text

【解决方案1】：

由于name 是 javascript 中的保留窗口变量名，并且应该是字符串，因此发生此问题。所以，当你使用：

var name=['muzaffarpur','madhepura','bihar','patana','delhi','munger'];

它显式地将其转换为一个字符串，例如：

name = 'muzaffarpur,madhepura,bihar,patana,delhi,munger';

您可以通过使用不同的数组变量名称来修复它，例如arr：

var arr = ['muzaffarpur', 'madhepura', 'bihar', 'patana', 'delhi', 'munger'];
var addImg = 0;
$(document).ready(function() {
  setInterval(slide, 1230);
});

function slide() {
  if (addImg <= 5) {
    $('#array-item').text(arr[addImg]);
    $('#index').text(addImg);
    addImg++;
  } else addImg = 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">
  <h1 id="array-item"></h1>
  <h3 id="index"></h3>
</div>

【讨论】：

【解决方案2】：

除了@palash 在他的回答中所说的之外，您还可以在document.ready() 事件回调中使用，这样您就永远不会与全局window.name 变量冲突，采取一条消息你必须确保为变量命名，以免它们与其他全局变量发生冲突。

$(document).ready(function(){
  var name = ['muzaffarpur','madhepura','bihar','patana','delhi','munger'];
  var addImg=0;
  setInterval(slide, 1230);
  
  function slide(){
    if(addImg<=5){
         $('#array-item').text(name[addImg]);
         $('#index').text(addImg);
         addImg++;
    }else addImg=0;
  }
});

<head>
<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>          
    <div id="div1">
    <h1 id="array-item"></h1>
    <h3 id="index"></h3>
    </div>
</body>
</html>

【讨论】：

【解决方案3】：

名称在 javascript 中保留。所以，请改变它。

var name1 = ['muzaffarpur', 'madhepura', 'bihar', 'patana', 'delhi', 'munger'];

var addImg = 0;
jQuery(document).ready(function () {
    setInterval(slide, 1230);
});

function slide() {
    if (addImg <= 5) {
        jQuery('#array-item').text(name1[addImg]);
        jQuery('#index').text(addImg);
        addImg++;
    } else {
        addImg = 0;
    }
}

【讨论】：

【解决方案4】：

name是javascript中的保留关键字

var place_name = ['muzaffarpur', 'madhepura', 'bihar', 'patana', 'delhi', 'munger'];

var addImg = 0;
$(document).ready(function() {
  setInterval(slide, 1230);
});

function slide() {
  if (addImg <= 5) {

    $('#array-item').text(place_name[addImg]);
    $('#index').text(addImg);
    addImg++;
  } else {
    addImg = 0;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">
  <h1 id="array-item"></h1>
  <h3 id="index"></h3>
</div>

【讨论】：

【解决方案5】：

name 是 JavaScript 中的保留关键字。您不得以用户定义的方式使用它。 Reserved keyword

【讨论】：