Tengo el siguiente marcado:

<fieldset>
   <div>
       <label class="editor-label">Question 1?</label>
       <input type="text" class="editor-field" />     
       <button type="button" data-bind="click: helpClicked">Help</button>
       <p class="help">Help 3</p>
   </div>
    <div>
       <label class="editor-label">Question 2?</label>
       <input type="text" class="editor-field" />
       <button type="button" data-bind="click: helpClicked">Help</button>
       <p class="help">Help 3</p>
   </div>
   <div>
       <label class="editor-label">Question 3?</label>
       <input type="text" class="editor-field" />
        <button type="button" data-bind="click: helpClicked">Help</button>
       <p class="help">Help 3</p>
   </div>
</fieldset>

Quiero alternar la visibilidad de la el <p> con la clase help en el mismo Div como el botón pulsado. Estoy tratando de usar $(this) para determinar qué botón ha sido pulsado y, a continuación, que podría conseguir la correcta «ayuda» elemento de allí.

El problema es que $(this) no le está devolviendo el botón pulsado.

Por el momento estoy simplemente tratando de ocultar el botón pulsado como:

var viewModel = {
    helpClicked: function () {
        $(this).hide();           
    }
};

ko.applyBindings(viewModel);

Esto no funciona. Alguien puede ayudar por favor?

InformationsquelleAutor davy | 2012-07-09

4 Comentarios

  1. 45

    Aquí es un jsFiddle con una posible solución:

    http://jsfiddle.net/unklefolk/399MF/1/

    Usted puede centrarse en los elementos del DOM que desea a través de esta sintaxis:

    var viewModel = {     
        helpClicked: function (item, event) {   
            $(event.target).hide(); 
            $(event.target).next(".help").show()            
        } 
    };  
    ko.applyBindings(viewModel); 
    • usted puede encontrar que usted necesita para utilizar currentTarget si usted está usando algo como un <button> con el contenido anidado. el target va a terminar siendo el contenido en el interior del botón, como una imagen, de intervalo o nodo de texto.
    • Siempre es posible encontrar los argumentos por la depuración y comprobación de la arguments objeto. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
    • se estaba terminando de eventos.de destino en el $() que se fija para mí.
  2. 14

    Trate de usar event.currentTarget seguido por next()

    $(event.currentTarget).next().hide();   

    Ejemplo de trabajo aquí

    • Esto es útil evento.objetivo de conseguir exactamente lo que usted hizo clic. Incluso si es un niño. currentTarget obtendrá el elemento, haga clic en el controlador se anexa.
    • evento.currentTarget no está disponible para IE8. Para <= IE8 apoyo que usted puede utilizar: var target = (event.currentTarget) ? event.currentTarget : event.srcElement;
  3. 3

    Son los divs dentro de la fieldset construido a través de knock-out? (se ven templatey). Si es así, creo que más MVVMish forma de abordar este sería extraer el vinculado actualmente elemento en el botón haga clic en controlador y obligar a la visibilidad de ayudar a cada párrafo a una vista del modelo de propiedad establecido por el controlador sobre el elemento correspondiente, en lugar de hacer la interfaz de usuario de las operaciones en el procedimiento. Al menos, este es el patrón que he estado avanzando hacia y descubrir que es mucho más agradable (especialmente después de hacer cosas similares en WPF y Silverlight).

  4. 1
    This should work
    
    var viewModel = 
    {
             helpClicked: function (data,element) {
           /*
          data is the current model passed to the button
          element is the button currently interacting with
         but to get the dom object equivalent of the 
         element you've to access it          
        via its currentTarget property
        */
            $(element.currentTarget).hide();           
        }
    };
    
    ko.applyBindings(viewModel);

Dejar respuesta

Please enter your comment!
Please enter your name here