Различное поведение javascript и jquery

Question

У меня есть кнопка, и я меняю ее значение и имя на клик, отображая то же значение в предупреждении. Его работа отлично, когда я использую jQuery, но не тогда, когда я использую функцию вызова со значением функции JavaScript, не меняется в представлении спереди, но в предупреждающем значении меняется совершенно странно.

Вот демос

JavaScript

function change() { 
 
    if ($(this).attr('name') == 'first') { 
 
    $(this).attr('name', 'second'); 
 
    $(this).attr('value', 'second'); 
 
    alert('new name ' + $(this).attr('name')); 
 
    } else { 
 
    $(this).attr('name', 'first'); 
 
    $(this).attr('value', 'first'); 
 
    alert('new name ' + $(this).attr('name')); 
 
    } 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="submit" id="button" value="first" name="first" onclick="change()">

JQuery

$('#button').click(function() { 
 
    if ($(this).attr('name') == 'first') { 
 
    $(this).attr('name', 'second'); 
 
    $(this).attr('value', 'second'); 
 
    alert('new name ' + $(this).attr('name')); 
 
    } else { 
 
    $(this).attr('name', 'first'); 
 
    $(this).attr('value', 'first'); 
 
    alert('new name ' + $(this).attr('name')); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="submit" id="button" value="first" name="first">

Я знаю, что могу использовать JQuery, как я уже включая библиотеку, но я так хотел бы знать, в чем разница между этими двумя.

Answer 1

Вам необходимо пройти this изменить функцию, так что вы можете получить доступ к щелкнул объект внутри этой функции, .click() события любого элемента будет автоматически обнаруживать $(this), но в функции вам нужно передать его

Pass this в change() функция кнопки:

<input type="submit" id="button" value="first" name="first" onclick="change(this)"> 

Так изменится функция будет иметь:

function change(obj) { 
 
    if ($(obj).attr('name') == 'first') { 
 
    $(obj).attr('name', 'second'); 
 
    $(obj).attr('value', 'second'); 
 
    alert('new name ' + $(obj).attr('name')); 
 
    } else { 
 
    $(obj).attr('name', 'first'); 
 
    $(obj).attr('value', 'first'); 
 
    alert('new name ' + $(obj).attr('name')); 
 
    } 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="submit" id="button" value="first" name="first" onclick="change(this)">

Answer 2

передавая «это» в функции и использовать его вместо «это» внутри функции решает вашу проблему.

, потому что с помощью «это» внутри функции не обрабатываются с помощью Jquery события, возвращается владельцу функции, которая является объектом кнопки вы имеете в JQuery он возвращает объект JQuery

function change(btn){ 
 
\t if($(btn).attr('name') == 'first'){ 
 
    \t $(btn).attr('name','second'); 
 
    $(btn).attr('value','second'); 
 
    alert('new name '+$(btn).attr('name')); 
 
    } else { 
 
    \t $(btn).attr('name','first'); 
 
    \t $(btn).attr('value','first'); 
 
    alert('new name '+$(btn).attr('name')); 
 
    } 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="submit" id="button" value="first" name="first" onclick="change(this)">