Question

我写了一个简单的数组列表和for循环语句，由于某种原因，只调用了数组列表中的最后一项。在用户点击按钮后，我需要一次一个地显示数组列表中的每个项目。到目前为止，这是我的代码。任何帮助，将不胜感激。感谢

var panelTitleArray = [
    'Bacon &amp; Cheddar Mash', 
    'Chipotle &amp; Cilantro Mash',
    'Pesto Mash', 
    'Pancetta &amp; Rosemary Mash', 
    'Taco Seasoning &amp; Cheddar Mash',
    'Roasted Garlic Mash',
    'Sour Cream &amp; Chives Mash',
    'Corn &amp; Red Pepper Flakes Mash',
    'Ranch Dressing Mash',
    'Broccoli &amp; Cheddar Mash',
    'Old Bay Seasoning Mash', 
    'Smoked Gouda &amp; Scallions Mash', 
    'BBQ Mash',
    'Horseradish &amp; Chive Mash',
    'Parmesan Mash',
    'Corn, Broccoli &amp; Carrot Bits Mash',
    'Greek Yogurt Mash'
  ];

 $(function panelTitle() {
   // $("#st-panelTitle").html(panelTitleArray[0]);

    for (var i = 0; i < panelTitleArray.length; i++) {

        $("#st-panelTitle").html(panelTitleArray[0]);

        $('.arrowNext').click(function(){
           $("#st-panelTitle").html(panelTitleArray[i]);
           console.log("clicked")
        });
   };

 });

Answer 1

尝试这样的事情

$(function panelTitle() {

    $("#st-panelTitle").html(panelTitleArray[0]);

    var i = 1;
    $('.arrowNext').click(function(){
       $("#st-panelTitle").html(panelTitleArray[i++]);
       console.log("clicked")
    });

});

Answer 2

或者也许使用jQuery的迭代器

$(panelTitleArray).each(function(i,v) {
  $('.arrowNext').click(function(){
    $("#st-panelTitle").html(v)
    console.log("clicked")
  })
})

Answer 3

你的代码所做的是循环遍历数组中的所有项目，将第一个项目分配给＃st-panelTitle元素x次并分配最后一项（你的代码在每次点击时循环完成）到＃st- panelJitle每次单击按钮时。

你需要重构整个click（）函数，如下所示：

http://jsfiddle.net/LxfLbb4b/

var panelTitleArray = [
  'Bacon &amp; Cheddar Mash', 
  'Chipotle &amp; Cilantro Mash',
  'Pesto Mash', 
  'Pancetta &amp; Rosemary Mash', 
  'Taco Seasoning &amp; Cheddar Mash',
  'Roasted Garlic Mash',
  'Sour Cream &amp; Chives Mash',
  'Corn &amp; Red Pepper Flakes Mash',
  'Ranch Dressing Mash',
  'Broccoli &amp; Cheddar Mash',
  'Old Bay Seasoning Mash', 
  'Smoked Gouda &amp; Scallions Mash', 
  'BBQ Mash',
  'Horseradish &amp; Chive Mash',
  'Parmesan Mash',
  'Corn, Broccoli &amp; Carrot Bits Mash',
  'Greek Yogurt Mash'
  ];

    var currentItem = 0;
    $("#st-panelTitle").html(panelTitleArray[currentItem]);
    $( '.arrowNext' ).click(function() {
        currentItem++;
        if(currentItem > panelTitleArray.length)
            currentItem = 0;
        $("#st-panelTitle").html(panelTitleArray[currentItem]);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="st-panelTitle"></div>
<input type="button" class="arrowNext" value="next" />

<div id="st-panelTitle"></div>
<input type="button" class="arrowNext" value="next" />

Javascript Array仅显示最后一个孩子

3 个答案: