Esta aplicación tiene 2 componentes, una página HTML que contiene algún elemento y un JavaScript para generar botones.

Intentaré dar un ejemplo simplificado en la pregunta por ahora, pero si hay algo que no está claro, subiría el código completo más tarde.

Estoy usando HandleBar.js para generar diferentes contenidos en el html, pero no se preocupe si no tiene idea de este complemento, haré otra versión que no sea handlebar.js.

Considere que la parte HTML se ve a continuación:

Versión 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}}

Entonces tengo una función JQuery que generaría la url

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

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

Descubrí que no hay forma de identificar qué botón es cuál. Como necesito declarar el var feedID fuera del botón, siempre obtendría el primer feedID que encuentre y se agregaría a todos los botones, ¿cómo puedo resolverlo? Por favor, dígame si esta pregunta es confusa, intentaré explicarla de una mejor manera.

Hay muchas personas que intentan ayudarme, pero parece que necesito dar más detalles para una mejor comprensión:

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

Deseo que la información anterior pueda ayudar

0
Anson Aştepta 11 may. 2016 a las 05:44

4 respuestas

La mejor respuesta

Por lo tanto, cuando selecciona $(".feedIdChecker") en realidad obtiene una matriz de todos los elementos coincidentes, pero tan pronto como llame a .html solo obtendrá el primero. Entonces, para resolver su problema, necesitamos recorrer todos los $(".feedIdChecker") de esta manera:

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

Esto adjuntará el controlador de clic a cada uno de los botones.

2
winhowes 11 may. 2016 a las 02:53

Que esta versión sea más rápida y con menos código.

$('[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>
2
Master DJon 11 may. 2016 a las 03:58

¿Puedes poner url en el botón y una clase genérica:

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

Y entonces

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

O incluso simplemente sin cambiar su marcado en absoluto

 $("button").click(function(){
                console.log($(this).prev('div').text());
        });
2
George Pant 11 may. 2016 a las 04:36

Puede usar el handlebars.js each / index para hacer esto:

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

Supongo que necesita una respuesta sobre cómo aplicar una identificación única a cada botón, no cómo vincularlos a los controladores de clics (que otras personas han respondido de todos modos)

2
Tibrogargan 11 may. 2016 a las 02:51