#javascript #jquery #ajax
#javascript #jquery #ajax
Вопрос:
Существует HTML-страница, подобная этой:
<div id="list"><a onclick = "javascript:addplaylist('shv231a','1');" href="javascript:void(0);"> </a></div>
<div id="list"><a onclick = "javascript:addplaylist('jhr2a13','1');" href="javascript:void(0);"> </a></div>
<div id="list"><a onclick = "javascript:addplaylist('thy2b1k','1');" href="javascript:void(0);"> </a></div>
Существуют функции javascript
addplaylist('shv231a','1');
addplaylist('jhr2a13','1');
addplaylist('thy2b1k','1');
Я хочу изменить значение ‘1’ на ‘2’ в функции javascript (addplaylist), когда пользователь нажимает на это
<a id="make2" onclick="" href="javascript:void(0);">Change the value 2</a>
Как я могу сделать это с помощью jquery?
Ответ №1:
Способ сделать это с помощью jQuery — переместить весь код Javascript в отдельный файл или script
блок в HTML. Любой способ, который абстрагирует отображение (HTML CSS) от поведения (Javascript)
Это потребует небольшой переработки HTML. В частности, удаление повторяющихся полей идентификатора в пользу того, чтобы идентификаторы были уникальными. Дополнительно удаляем ссылки javascript из onclick
обработчика.
<div id="list1"><a> </a></div>
<div id="list2"><a> </a></div>
<div id="list3"><a> </a></div>
Затем с помощью jQuery вы можете указать поведение этих ссылок непосредственно из JavaScript. Это верно как для ссылок списка воспроизведения, так и для той, которая изменяет их для передачи ‘2’,
$(document).ready(function () {
var secondArg = '1';
$('#list1 a').click(function (e) {
addplaylist('shv231a1', secondArg);
e.preventDefault(); // Don't follow link
});
$('#list2 a').click(function (e) {
addplaylist('jhr2a13', secondArg);
e.preventDefault(); // Don't follow link
});
$('#list3 a').click(function (e) {
addplaylist('thy2b1k', secondArg);
e.preventDefault(); // Don't follow link
});
$('#make2').click(function (e) {
secondArg = '2';
e.preventDefault();
});
});
Ответ №2:
Это возможное решение:
<a id="make2" onclick="javascript:changeToTwo();" href="javascript:void(0);">Change the value 2</a>
Javascript
function changeToTwo() {
$('div#list a').each(function() {
$(this).attr('onclick', $(this).attr('onclick').replace("'1'","'2'"));
});
}
Если я правильно помню, ie выберет только 1 элемент с тем же идентификатором, поэтому вы можете рассмотреть возможность переноса его в селектор класса
Ответ №3:
1) Идентификаторы должны быть уникальными на странице 2) используйте класс для выбора 3) не допускайте попадания вашего функционального кода в разметку
HTML:
<div id="1" class="list"><a> </a></div>
<div id="2" class="list"><a> </a></div>
<div id="3" class="list"><a> </a></div>
javascript:
$('.list').each(function ( index, element) {
addplaylist(element.id);
});