$ ('# id_gender') vs var gender = $ ('# id_gender')

Question

Пользователь должен выбрать пол.

HTML

<form ...> 
<select id="id_gender" name="gender" onchange="hideMaidenName(this.value)"> 
<option value="M">Male</option> 
<option value="F">Female</option> 
<option value="U" selected="selected">To be defined</option> 
</select> 
</form> 

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

Если пол мужского пола, то предупреждает пользователя, что они должны очистить девичью фамилию вручную. Затем они могут продолжаться. Но в этом случае мы автоматически меняем пол на «U».

Не могли бы вы помочь мне разобраться в ситуации. В консоли я проверил, что я хотел бы передать в производственный код.

В консоли:

var gender = $('#id_gender') 

gender 
[<select id=​"id_gender" name=​"gender" onchange=​"hideMaidenName(this.value)​">​…​</select>​] 

gender.val() 
"U" 

Но когда я использую этот код в производстве, я получаю исключение, что пол не является функцией. Я могу сделать код выполнить так:

Рабочий код:

var maiden_name = $('#id_maiden_name'); 

function hideMaidenName(gender) { 
     if ($('#id_gender').val() == 'M') {   
      if (maiden_name.val() != "") { 
       $('#id_gender').val('U') 
       alert("Clear maiden name!"); 
       return;    
      }   
     } 

    } 

</script> 

И далее идет мой провал.

Не работает код:

var gender = $('#id_gender'); 
var maiden_name = $('#id_maiden_name'); 
var maiden_name_row = $('#id_maiden_name_row') 
function hideMaidenName(gender) {   
    if (gender.val() == 'M') {   
     if (maiden_name.val() != "") { 
      gender.val('U') 
      alert("Claear maiden name!"); 
      return;    
     } 

     maiden_name_row.hide() 
    } 
    else { 
     maiden_name_row.show() 
    } 
} 

Половина рабочий код (уменьшенная функциональность, как мне не удалось изменить значение пола обратно 'U':

var gender = $('#id_gender'); 
var maiden_name = $('#id_maiden_name'); 

function hideMaidenName(gender) {   
    if (gender == 'M') {    
     if (maiden_name.val() != "") {    
      alert("Claear maiden name!"); 
      return;    
     } 
    } 
} 

Вопросов :

1. В чем разница между $ ('# id_gender') и var gender = $ ('# id_gender'). Я имею в виду, почему первый работает отлично, а последний - исключение.

2. Почему в половине рабочего кода gender == 'M' отлично работает? Пол, кажется, является элементом, значение которого я собираюсь проверить. Но здесь у нас есть ценность, которая хранится в полу.

3. У меня есть рабочий код, но я ищу гендерный элемент дважды. Как предотвратить двойное обнаружение, если это возможно?

Answer 1

Вы передаете в качестве аргумента функции hideMaidenName значение выбранной опции при изменении (это строка, например, 'M'). Я изменил его, чтобы передать элемент DOM (select), передав this в качестве аргумента. Вы также должны обернуть gender и использовать его как объект JQuery, например $(gender) противном случае вы получите ошибку .val() не является функцией:

var gender = $('#id_gender'); 
 
var maiden_name = $('#id_maiden_name'); 
 
var maiden_name_row = $('#id_maiden_name_row') 
 

 
function hideMaidenName(gender) { 
 
    //here you have to use gender as jquery object 
 
    if ($(gender).val() == 'M') { 
 
    if (maiden_name.val() != "") { 
 
     gender.val('U') 
 
     alert("Claear maiden name!"); 
 
     return; 
 
    } 
 

 
    maiden_name_row.hide() 
 
    } else { 
 
    maiden_name_row.show() 
 
    } 
 
}

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

 
<select id="id_gender" name="gender" onchange="hideMaidenName(this)"> 
 
    <option value="M">Male</option> 
 
    <option value="F">Female</option> 
 
    <option value="U" selected="selected">To be defined</option> 
 
</select>

Answer 2

Вместо того, чтобы устанавливать значение поля выбора, вы можете просто установить параметр со значением U, выбранным вручную.

$('select#id_gender option[value="U"]').prop('selected', true) 

EDIT:

var gender = $('#id_gender'); 
var maiden_name = $('#id_maiden_name'); 
function hideMaidenName(gender) {   
    if (gender == 'M') {    
     if (maiden_name.val() != "") {   
      //selecting option with value "U" 
      $('select#id_gender option[value="U"]').prop('selected', true) 
      return;    
     } 
    } 
} 

EDIT2:

1. Там нет никакой разницы. Разница в том, что вы пишете элемент в переменную, вам не нужно много раз искать DOM.

Попытайтесь ответить на другие вопросы позже.