有几个元素的JQuery问题 [英] JQuery with several Elements issue

问题描述

我在DOM中获得了一个锚点，下面的代码用一个奇特的按钮代替它。这工作得很好，但如果我想要更多的按钮，它崩溃。我可以在没有for循环的情况下做到这一点吗？

i got an anchor in the DOM and the following code replaces it with a fancy button. This works well but if i want more buttons it crashes. Can I do it without a for-loop?

$(document).ready(buttonize);   

function buttonize(){
    //alert(buttonAmount);

    //Lookup for the classes
    var button              =   $('a.makeabutton');
    var buttonContent       =   button.text();
    var buttonStyle         =   button.attr('class');
    var link                =   button.attr('href');
    var linkTarget          =   button.attr('target');
    var toSearchFor         =   'makeabutton';
    var toReplaceWith       =   'buttonize';
    var searchButtonStyle   =   buttonStyle.search(toSearchFor);


    if (searchButtonStyle != -1) {      

        //When class 'makeabutton' is found in string, build the new classname
        newButtonStyle      =   buttonStyle.replace(toSearchFor, toReplaceWith);
        button.replaceWith('<span class="'+newButtonStyle
                 +'"><span class="left"></span><span class="body">'
                 +buttonContent+'</span><span class="right"></span></span>');

        $('.buttonize').click(function(e){
          if (linkTarget == '_blank') {
            window.open(link);
          }
          else window.location = link; 
        });
    }
}

推荐答案

每一种方法都是因为你正在获取元素的集合（即使它只是一个元素）

Use the each method because you are fetching a collection of elements (even if its just one)

var button              =   $('a.makeabutton');
button.each(function () {
    var btn = $(this);
    var buttonContent       =   btn.text();
    var buttonStyle         =   btn.attr('class');
    var link                =   btn.attr('href');
    var linkTarget          =   btn.attr('target');
    var toSearchFor         =   'makeabutton';
    var toReplaceWith       =   'buttonize';
    var searchButtonStyle   =   buttonStyle.search(toSearchFor);
    ...
};

每个方法遍历所有检索到的元素，并且您可以使用 this 关键字来引用当前循环中的元素

the each method loops through all the elements that were retrieved, and you can use the this keyword to refer to the current element in the loop

这篇关于有几个元素的JQuery问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！