Изменение вызывающей переменной функции javascript с помощью jquery?

#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);
});