jquery将URL存储到数组中，并使用.click(）打开它们;带控件的功能

jquery store urls into an array and open them using .click(); function with controls

本文关键字：功能 控件 click 存储 URL 数组 jquery      更新时间：2023-09-26

我对我正在尝试做的事情的阐述，(尝试用两种方式解释它以帮助您获得想法(

示例 1

  1. 将所有元素存储如下：从内部<div class=".resources"></div> <a href="etc">url1</a>存储在数组中，以便可以使用click();函数单击它们
  2. 使用默认按钮打开数组中的第一个 URL - 即 $(array[0]).click();
  3. 使用下一步按钮从数组中打开下一个网址 - 即上次点击的$(array[+1]).click();
  4. 使用"上一步"按钮从数组中打开以前的URL - 即上次单击的$(array[-1]).click();

示例 2

  1. 在 HTML 中创建一个空类，如下所示： <div class="resources"></div>
  2. 在 JAVASCRIPT/JQUERY 中创建一个 URL 数组，并将它们存储在 .resources 类中
  3. 在 HTML 中创建上一个 、 默认 、 下一个按钮
  4. 单击默认按钮时打开数组中的第一个URL，即：$(array[0]).click();
  5. 单击下一步按钮时打开数组中的下一个URL，即：$(array[+1]).click();
  6. 单击"上一个"按钮时会打开数组中的上一个URL，即：$(array[-1]).click();

务必：URL 必须使用以下命令打开： click(); 函数： 像这样： $(array[0]).click();

小提琴使其更清晰：查看小提琴

向您展示暗示

RingArray以与您的代码示例一起使用是多么简单。

.CSS

body {
    color: #fff;
}
.link {
    width: 180px;
    height: 20px;
    padding: 10px;
    background-color: black;
    cursor: pointer;
    text-align: center;
}

.HTML

<div class="resources">
    <a href="url1"></a>  
    <a href="url2"></a>  
    <a href="url3"></a>  
    <a href="url4"></a>    
</div>
/* index -= 1 */
<div class="link open-prev">click previous link</div> 
/* indexed [0] */
<div class="link open-current-link">click default link</div> 
/* index += 1 */
<div class="link open-next">click next link</div>

爪哇语

function RingArray(object, position) {
    this.array = RingArray.compact(object);
    this.setPosition(position);
}
RingArray.toInt32 = function (number) {
    return number >> 0;
};
RingArray.toUint32 = function (number) {
    return number >>> 0;
};
RingArray.isOdd = function (number) {
    return number % 2 === 1;
};
RingArray.indexWrap = function (index, length) {
    index = RingArray.toInt32(index);
    length = RingArray.toUint32(length);
    if (index < 0 && RingArray.isOdd(length)) {
        index -= 1;
    }
    return RingArray.toUint32(index) % length;
};
RingArray.compact = (function (filter) {
    var compact;
    if (typeof filter === 'function') {
        compact = function (object) {
            return filter.call(object, function (element) {
                return element;
            });
        };
    } else {
        compact = function (object) {
            object = Object(object);
            var array = [],
                length = RingArray.toUint32(object.length),
                index;
            for (index = 0; index < length; index += 1) {
                if (index in object) {
                    array.push(object[index]);
                }
            }
            return array;
        };
    }
    return compact;
}(Array.prototype.filter));
RingArray.prototype = {
    setPosition: function (position) {
        this.position = RingArray.indexWrap(position, this.array.length);
        return this;
    },
    setToStart: function () {
        return this.setPosition(0);
    },
    setToEnd: function () {
        return this.setPosition(this.array.length - 1);
    },
    setRandom: function () {
        return this.setPosition(Math.floor(Math.random() * this.array.length));
    },
    increment: function (amount) {
        return this.setPosition(this.position + (RingArray.toInt32(amount) || 1));
    },
    previousElement: function () {
        return this.array[RingArray.indexWrap(this.position - 1, this.array.length)];
    },
    currentElement: function () {
        return this.array[this.position];
    },
    nextElement: function () {
        return this.array[RingArray.indexWrap(this.position + 1, this.array.length)];
    }
};
/* get urls and store in an array */
var links = $('.resources a[href*="url"]'),
    linkRing = new RingArray(links);
/* click and open default link ! */
$('.open-current-link').on('click', function () {
    console.log(linkRing.setToStart());
});
/* click and open next link */
$('.open-next').on('click', function () {
    console.log(linkRing.increment(1));
});
/* click and open previous link */
$('.open-prev').on('click', function () {
    console.log(linkRing.increment(-1));
});

在jsFiddle上

我稍微修改了你的小提琴，它似乎可以做你想做的事; 如果我理解正确的话：

改良小提琴

var links = $( '.resources a[href*="url"]' );
var currentLink = 0;
/* click and open default link ! */ 
$('.open-current-link').on('click', function(){ 
    $( links[currentLink] ).click();        
});
/* click and open next link */ 
$('.open-next').on('click', function(){  
    currentLink = currentLink + 1;
    if (currentLink == 4){
        currentLink = 0;
    }
    alert('clicking ' + $(links[currentLink]).attr('href'));
    $( links[currentLink] ).click();        
});
/* click and open previous link */
$('.open-prev').on('click', function(){
    currentLink = currentLink - 1;
    if (currentLink == -1){
        currentLink = 3;
    }
    alert('clicking ' + $(links[currentLink]).attr('href'));
    $( links[currentLink] ).click();      
});
相关文章：