Передача переменных на jQuery

Question

только наличие некоторых проблем с этой функцией jQuery.

Что я пытаюсь сделать, это:

у меня есть некоторые аудио кнопки управления, которые выглядят следующим образом:

<p><a href='#' onClick="player1.loadAudio(1); return false;">Play audio</a></p> 

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

так я сделал это:

<div id="audioControlButtons-1"> 
    <div class="speaker">&nbsp;</div> 
    <div class="play">&nbsp;</div> 
    <div class="pause">&nbsp;</div> 
</div> 

<script> 
    $(document).ready(function() { 
     $("[id^=audioControlButtons-] div.play").click(function() { 
      var id = new Number; 
      id = $(this).parent().attr('id').replace(/audioControlButtons-/, ''); 
      //alert(id); 
      player1.loadAudio(id); 
      return false; 
     }); 
     }); 

</script> 

моя проблема:

идентификатор не переходя к player1.loadAudio (идентификатор)

если я жёстко player1 .loadAudio()

это работает! но в тот момент я пытаюсь передать переменную в функцию не работает ...

однако если вы раскомментировать оповещения (идентификатор) вещь, которую вы увидите идентификатор получения генерации ...

может кто-то помочь?

веселит, дана

Answer 1

Я думаю, что я вижу вашу проблему. Идентификатор переменной - это строка. Пытаться;

player1.loadAudio(parseInt(id)); 

Yah и инициализация линии не требуется. Просто используйте;

var id = $(this).parent().attr('id').replace(/audioControlButtons-/, ''); 

Answer 2

Я на самом деле своего рода путать с вашим примером, потому что вы изначально имеют это:

<p><a href='#' onClick="player1.loadAudio(1); return false;">Play audio</a></p> 

, но тогда вы не ссылаться на него снова. Вы хотите сказать, что этот html:

<div id="audioControlButtons-1"> 
    <div class="speaker">&nbsp;</div> 
    <div class="play">&nbsp;</div> 
    <div class="pause">&nbsp;</div> 
</div> 

Это то, что вы на самом деле создаете? Если это так, то вы можете переписать так:

<div class="audio-player"> 
    <div class="speaker">&nbsp;</div> 
    <div class="play" data-track="1">&nbsp;</div> 
    <div class="pause">&nbsp;</div> 
</div> 

Затем в блоке сценария:

<script> 
    $(document).ready(function() { 
     $(".audio-player > .play").click(function() { 
      var track = $(this).data('track'); 
      player1.loadAudio(+track); 
      return false; 
     }); 
    }); 
</script> 

Так несколько вещей, которые собираются здесь.

1. Я просто дал ваш содержащий div класс (.audio-player) так, что это гораздо более общий и более громоздко. Вы не хотите делать такие вещи, как [id^=audioControlButtons-], потому что он намного медленнее для javascript для прохождения и синтаксического анализа DOM. И если вы собираетесь иметь кратность одного и того же элемента на странице, класс гораздо более подходит для этого по идентификаторам.
2. Я добавил номер трека, который вы хотите добавить в play, в качестве атрибута data (data-track). Использование атрибута data позволяет хранить произвольные данные на интересующих вас элементах DOM (например, здесь находится кнопка .play). Тогда вам не понадобится этот странный обход DOM с помощью метода replace, чтобы получить номер трека. Это позволяет сократить ненужную обработку JS и перемещение DOM.
3. Учитывая это, я использую метод jQuery.data() для текущего элемента DOM с аргументом "track". Затем он получит значение атрибута data-track.
4. С новым номером трека я передаю это в ваш метод player1.loadAudio с знаком +. Это небольшой трюк javascript, который позволяет вам преобразовать ваше значение в фактическое число, если это то, что требует метод.

Есть по крайней мере, несколько других оптимизаций, которые можно сделать здесь - делегирование событий, а не делать все внутри ready события - но это выходит за рамки данного вопроса. Черт, даже моя реализация может быть немного оптимизирована, но опять же, это потребует немного более глубокого объяснения.