JQuery в названии

Question

У меня есть много кнопок всего сайта со значением (текст кнопки) и каждый из них имеет, например, загрузочный класс «.btn-умолчанию»:

<input type="button" value="Clear" class="form-control input-sm btn-default" onclick="doingSomethingElseEtc();"> 

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

Например, только чтобы получить суть того, что я спрашиваю:

$('.btn-default').attr('title', $(".btn-default").val()); 

Я пытаюсь коснуться код как можно меньше, и т.д ..

Спасибо!

Answer 1

Вы можете использовать каждый для повторения каждой кнопки и установки названий.

$('.btn-default').each(function(i,obj){ 
    $(obj).attr('title', $(obj).val()); 
}); 

Answer 2

Когда вы читаете значение из набора элементов, Jquery только возвращает значение первого в наборе. Поэтому вам нужно перебрать все их и установить заголовок на каждом из них.

$('.btn-default').each(function() { 
    var elem = $(this); 
    elem.attr('title', elem.val()); 
}); 

Даунсайд к этому, если есть много элементов, он будет медленным. Также вам нужно сделать это на готовом документе.

Answer 3

Нет необходимости в каких-либо аргументах или переменных или других whatzit. :-)

$('.btn-default').each(function() { 
    $(this).attr('title', $(this).val()); 
}); 

Demo

Answer 4

Ваша идея тоже будет работать, если вы хотите добавить функцию к attr как это:

$('.btn-default').attr('title', function() { 
    //console.log($(this).val(), $(this).text()); 
    return $(this).val() || $(this).text(); 
}); 

Это добавит к каждой кнопке с классом btn-default атрибут title. Я думаю, что это также хорошо, чтобы получить текст, потому что ваша кнопка может быть определена с input value=".." или <button>text</button>

Пожалуйста, посмотрите на демо ниже, и в этом jsFiddle.

$('.btn-default').attr('title', function() { 
 
    //console.log($(this).val(), $(this).text()); 
 
    return $(this).val() || $(this).text(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="button" value="Clear" class="form-control input-sm btn-default" onclick="doingSomethingElseEtc();"> 
 
<button class="btn-default">test1</button> 
 
<button class="btn-default">test2</button>