jquery - 简单的 jQuery 循环 & 返回当前值

Question

我试图弄清楚如何编写我认为非常简单的 jQuery 函数，但可以使用一些帮助。

所以我有一个名为“linkr”的变量，我正在使用它。

$('img#button4').attr('u', linkr);

接下来，我有一个附加到链接器的数组

var linkr = [
    'button1',
    'button2',
    'button3']

我试图弄清楚如何遍历链接器变量中的值，每 5 秒一次只显​​示一个。

所以本质上，代码将代表

$('img#button4').attr('u', 'button1');

5 秒后

    $('img#button4').attr('u', 'button2');

等等。预先感谢您提供的任何帮助或建议。

Answer 1

var currentIndex = 0; //set this as a global variable i.e. before everything and not inside a function
...
...
setInterval(function(){
    $('img#button4').attr('u', linkr[currentIndex]);
    currentIndex = currentIndex < linkr.length -1 ? currentIndex + 1 : 0;
}, 5000);

Answer 2

只需将您的按钮交换包装在一个函数中，然后使用setInterval

var buttonTimer = setInterval(buttonFunction, 5000);

    function buttonFunction() {
      ... your button function
    }

    function abortButtonTimer() { // to be called when you want to stop the timer
      clearInterval(buttonTimer);
    }

Answer 3

您想设置更新 button4 的时间间隔，然后在它超出数组范围时将其清除。

var iterator = 0;
var timer;

timer = setInterval(function () {
  if (iterator <= linkr.length) {
    $('img#button4').attr('u', linkr[iterator]);
    iterator++;
  }
  else {
    clearTimeout(timer);
  }
}, 5000);

Answer 4

使用data属性而不是u属性。我将向您展示如何使用image 属性
实现您想要的效果：alt

LIVE DEMO

一切你需要的：

var c = 0; // a dummy counter :)    
setInterval(function() { 
  $('img#button4').attr('alt', linkr[++c%linkr.length]); // or use 'u' only if REALLY needed
} ,1000 ); // demo only, use 5000 instead

使用data-*属性应如下所示：

$('img#button4').data('u', linkr[++c%linkr.length]);

Answer 5

我认为这就是您要查找的内容，假设“sel”是有效的选择器，“attr”是选择器的有效属性，“linkr”是包含“attr”有效值的有效数组：

// global vars  - prefixed with "g"
var gidx = 0;
var gsel = "";
var gattr = "";
var glinkr = [];
var gLoopLinkr = null;

// call this function to set up linkr
function LoopLinkr( sel, attr, linkr ){
    gidx = 0; // reset
    gsel = sel;
    gattr = attr;
    glinkr = linkr;
    gLoopLinkr = window.setInterval("DoLoopLinkr", 5000 );
}

function DoLoopLinkr(){
    $(gsel).attr( gatt, linkr[gidx] );
    gidx++;

    // decide how to end this routine ..
    if (gidx=glinkr.length){ 
        // stop doing this
        window.clearInterval( gLoopLinkr );
        // or loop back to the begining and coninue on
        // gidx=0;
    }
}

// e.g. call
LoopLinkr("#mydiv", "background", ["img1.jpg", "img2.jpg", "img3.jpg"] );