JavaScript/Jquery: Eine for-Schleife-Funktion mit einigen speziellen Verwendung

Question

Diese Anwendung haben 2 Komponenten, eine HTML-Seite, die ein Element und ein JavaScript enthalten, um Schaltflächen zu generieren.

Ich werde versuchen, ein einfaches Beispiel in der Frage für jetzt zu geben, aber wenn es etwas unklar ist, dann würde ich den vollständigen Code später hochladen.

Ich benutze HandleBar.js, um verschiedene Inhalte in der HTML zu generieren, aber keine Sorge, wenn Sie keine Ahnung von diesem Plugin haben, werde ich eine andere nicht-lenker.js Version machen.

Betrachten Sie die HTML-Teil wie unten aussieht:

HandleBar.js Version

//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}} 

Dann habe ich eine Funktion JQuery, die ausgeben würde die URL

var feedId = $(".feedIdChecker").html(); 

      $('".output-'+feedId+'"').click(function(){ 
       var postUrl = $('".'+feedId+'-EditRegionUrl"').html(); 
       console.log(postUrl); 
     }); 
    }); 
    } 

gefunden Es gibt keine Möglichkeit zu identifizieren, welcher Knopf welcher ist. Da ich die var feedID außerhalb der Schaltfläche deklarieren muss, würde es immer die erste feedID erhalten, die es erstellt und an alle Schaltflächen anfügt, wie kann ich es lösen? Bitte sagen Sie mir, wenn diese Frage verwirrend ist, werde ich versuchen, es besser zu erklären.

Es gibt viele Menschen, die versuchen, mir zu helfen, aber es scheint muss ich zum besseren Verständnis einige weitere Details, um heraus zu geben:

Javascript:

var initRegionEdit = function(){ 

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

HTML

<div class="EditRegionUrl" >{{url}}</div> 
<div class="feedIdChecker">{{feedId}}</div> 
    {{#if region}} 
          <span class="dropdown"><i class="fa fa-map-marker" aria-hidden="true" style="color:gray;"></i> 
           <span class="result-date result-date-region" type="button" data-toggle="dropdown">{{region}} 
           <span class="caret"></span></span> 
           <ul class="dropdown-menu" style="min-width:100px;text-align:center;"> 
            <li class="CTHK" data-url="{{url}}" style=" margin-top: 0px !important;margin-bottom: 0px !important;"><a href="javascript:void(0)">Hong Kong</a></li><div class="divider"></div> 
            <li class="CTTW" style=" margin-top: 0px !important;margin-bottom: 0px !important;"><a href="javascript:void(0)">Taiwan</a></li><div class="divider"></div> 
           </ul> 
          </span> 
          {{/if}} 

Ich wünsche obige Informationen können helfen

Answer 1

Also, wenn Sie $(".feedIdChecker") auswählen, erhalten Sie tatsächlich ein Array aller übereinstimmenden Elemente, aber sobald Sie .html aufrufen, erhalten Sie nur die erste. So Ihr Problem zu lösen, die wir in einer Schleife über alle $(".feedIdChecker") s benötigen etwa so:

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

Dies wird die Click-Handler zu jedem der Knöpfe befestigen.

Answer 2

Sie könnten die lenker.js verwenden jede/Index-Funktion, dies zu tun:

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

Ich gehe davon aus Sie eine Antwort, wie brauchen eine eindeutige ID für jede Taste anwenden, nicht, wie Klick-Handler, um sie zu binden (die anderen Menschen ohnehin beantwortet haben)

Answer 3

Können Sie sich url in den Knopf an setzen und eine generische Klasse:

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

und dann

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

oder auch nur ohne Markup an allen

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

Answer 4

Mai Wechsel Diese Version ist schneller und mit weniger Code.

$('[class*=output-]').click(function() { 
 
    var feedId = this.className.split("-")[1]; 
 
    var postUrl = $('.EditRegionUrl-' + feedId).html(); 
 
    alert(postUrl); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="feedIdChecker">1</div> 
 
<div class="EditRegionUrl-1" >URL1</div> 
 
<button class="output-1">Output1</button> 
 

 
<div class="feedIdChecker">2</div> 
 
<div class="EditRegionUrl-2" >URL2</div> 
 
<button class="output-2">Output2</button>