JavaScript/Jquery：一个具有特殊用法的for循环函数

这个应用程序有两个组件，一个包含一些元素的HTML页面和一个生成按钮的JavaScript

现在我将尝试给出一个简单的例子，但是如果有不清楚的地方，我会稍后上传完整的代码

我正在使用HandleBar.js在html中生成不同的内容，但不要担心，如果您对这个插件一无所知，我将制作另一个非HandleBar.js版本。

考虑如下所示的Html部分：

HandleBar.js版本

    //example:
    //{{feedId}} = 0t454g465754754h456
    //{{url}} = www.jegdo.co.uk


    {{each}}
    <div class="feedIdChecker">{{feedId}}</div>

    <div class="{{feedId}}-EditRegionUrl" >{{url}}</div>

    <button class="output-{{feedId}}"><a href="javascript:void(0)">Output</a></button>
   {{/each}}

我发现无法识别哪个按钮是哪个。由于我需要在按钮外声明

var feedID

，它总是会得到它找到的第一个feedID并附加到所有按钮上，我如何解决它？请告诉我，如果这个问题让人困惑，我会尽量用更好的方式来解释

有很多人试图帮助我，但为了更好地理解，我似乎需要提供更多的细节：

Javascript:

    var initRegionEdit = function(){

            var feedId = $(".feedIdChecker").html();
            $(".CTHK").click(function(){
                  var postUrl = ($(this).prev('div').html());
               })
}

HTML

{{url}
{{feedId}}
{{#如果区域}}
{{区域}}




{{/if}

---

我希望以上信息能有所帮助

您可以使用handlebar.js each/index功能来实现这一点：

<button id="whatever-{{@index}}"
        class="output-{{feedId}}">
    <a href="javascript:void(0)">Output</a>
</button>

我假设您需要一个关于如何将唯一id应用于每个按钮的答案，而不是如何将单击处理程序绑定到按钮（其他人已经回答了这个问题）

因此，当您选择

$（“.feedIdChecker”）

时，实际上会得到一个包含所有匹配元素的数组，但只要您调用

.html

，它只会得到第一个元素。因此，为了解决您的问题，我们需要遍历所有的

$（“.feedIdChecker”）

如下：

$(".feedIdChecker").each(function(i, e) {
    var feedID = $(e).html();
    $('.output-'+feedID).click(function(){
        var postUrl = $("." + feedID + "-EditRegionUrl").html();
        console.log(postUrl);
    });
});

---

这会将单击处理程序附加到每个按钮。

您可以将url放入按钮和泛型类中吗：

<button class="output-{{feedId}} btn-class" data-url="{{url}}"><a href="javascript:void(0)">Output</a></button>

甚至根本不改变标记

 $("button").click(function(){
                console.log($(this).prev('div').text());
        });

---

希望这个版本更快，代码更少

$（'[class*=output-]'）。单击（函数（）{
var feedId=this.className.split（“-”[1]；
var postrl=$（'.EditRegionUrl-'+feedId）.html（）；
警惕（姿势）；
});

1.
URL1
输出1
2.
URL2
Output2
你只是想点击按钮的url，还是我弄错了？
$（this）.prevAll（.feedIdChecker”）.eq（0）.html（）
-jQuery是关于DOM遍历的…我尝试了你的方法，但它没有返回任何结果，控制台说undefinedi忘记在url中加单引号请看这里这两种方法都有效
<button class="output-{{feedId}} btn-class" data-url="{{url}}"><a href="javascript:void(0)">Output</a></button>

$('.btn-class').click(function(){
                console.log($(this).data('url') );
        });

 $("button").click(function(){
                console.log($(this).prev('div').text());
        });