jQuery automatyczne wykrywanie, jeśli potrzebuję użyć .html() lub .val()

Question

Piszę wtyczkę jquery, aby utworzyć wywołania ajax przeznaczone dla mojej aplikacji.

Wewnątrz tej wtyczki, mój ajax wywołanie wygląda następująco (zredukowane do jakiej potrzeby zapytania):

$.ajax({ 
     url: route, 
     type: "post", 
     data: inputData, 
     success: function(response, textStatus, jqXHR) { 
      if (outputSelector !== undefined) { 

       $(outputSelector).html(response); 
       // or 
       $(outputSelector).val(response); 

      } 
     } 
    }); 

outputSelector to selektor, zdefiniowana poza wtyczki. Nie wiem, czy ten selektor to <div> lub <input>, czy nawet <select>. Czy istnieje inteligentny sposób, aby wiedzieć, czy muszę używać val(), lub html()?

Answer 1

Ewentualnie możemy sprawdzić, czy element ma value właściwość:

var el = $(outputSelector); 
if (el[0].value !== undefined) { 
    el.val(response); 
} else { 
    el.html(response); 
} 

tak, to trochę jak jednej linii uniwersalnym rozwiązaniem mogłoby być:

$(outputSelector).each(function() { 
    this[this.value !== undefined ? "value" : "innerHTML"] = response; 
}); 

Answer 2

Można użyć metody .is(..) aby określić, która metoda używać.

$.ajax({ 
    url: route, 
    type: "post", 
    data: inputData, 
    success: function(response, textStatus, jqXHR) { 
     if (outputSelector !== undefined) { 
      var $output = $(outputSelector), 
       method = $output.is('input,select,textarea') ? 'val' : 'html'; 

      $output[method](response); 
     } 
    } 
}); 

Answer 3

Wewnątrz funkcji sukcesu, umieścić:

if (outputSelector !== undefined) { 
    if(outputSelector.is("input")) 
    { 
     outputSelector.val(response); 
    } 
    else if (outputSelector.is("div")) 
    { 
     outputSelector.html(response); 
    } 
} 

byłoby lepiej składni użyć instrukcji switch, ale jeśli tylko przypuszczać wejścia zostaną wykorzystane do val(), a wszystko inne jest html() następnie po prostu zastąp ostatni else if tylko else i usuń warunkowe.

Answer 4

Jeśli outputSelector jest selektorem klasy, a elementy są mieszane, należy użyć .each. Chociaż nie jest dobrze mieszać div i input z tą samą klasą, ale jeśli tworzysz wtyczkę, musisz wziąć pod uwagę taki przypadek.

$(outputSelector).each(function() { 
    if ('value' in this) { 
     $(this).val(response); 
    } else { 
     $(this).html(response); 
    } 
}); 

Answer 5

Można też zastosować metodę .prop() celu ustalenia, czy właściwość jest zdefiniowana dla danego selektora:

if ($(outputSelector).prop("value") !== undefined) 
    $(outputSelector).val(response); 
else 
    $(outputSelector).html(response); 

EXAMPLE

Ewentualnie można nam .hasOwnProperty()