jQuery getJSON: щелчок «этим» с нескольких уровней вниз - PullRequest
Новая
       23

jQuery getJSON: щелчок «этим» с нескольких уровней вниз

2 голосов
/ 29 августа 2011

Резюме: при попытке ссылки нажали "это" из нескольких вызовов.

Привет всем,

У меня есть ситуация, когда у меня есть набор кнопок (кнопки 1 - 6) в виде неупорядоченного списка. Когда нажата одна из кнопок, я бы хотел, чтобы JSON загрузил еще несколько

опций (на основе данных json) под кнопкой, на которую нажали. Прямо сейчас, когда я нажимаю одну из кнопок, она загружает опции на основе JSON под всеми кнопками. Проблема в том, что я не уверен, как ссылаться на «this» вызова функции «click», а не на «this», связанное с одним из вложенных вызовов.

Я большой любитель, когда дело доходит до jQuery, поэтому я полагаю, что это, вероятно, легко исправить. Простите, если моя терминология немного не в порядке.

Спасибо за чтение и за рассмотрение моего вопроса.

Вот соответствующий javascript: 

$(".block-buttons .level1 a.level1_a").click(function () 
{
  $.getJSON('api/1/test.json', 
    function(data) {    
        ul = $('<ul>');
        $.each(data.items,
        function( intIndex, objValue )
        {
            a = $("<a/>").text(objValue.name);
            li = $('<li>').attr("class",'level2').append(a);
            ul.append(li);
        });
        /* Here is where the problem lies.  I'd like to append the 
           new JSON-loaded data to the ".level1" element that was clicked
           and not to all of the ".level1" elements.  I need to figure out how 
           to replace the ".level1" below with some reference to the "this"
           from the clicked element.  
        */
        $(".level1").append(ul);            
      });   
  }
  return false; 
});

Вот соответствующий HTML: 

<div class="block-center block-buttons">
<ul>
<li class="top"><a class="top_a" href="">Make a Selection</a>
    <ul>
    <li class="level1"><a class="level1_a" id="button_1" href="">Button 1</a></li>
    <li class="level1"><a class="level1_a" id="button_2" href="">Button 2</a></li>
    <li class="level1"><a class="level1_a" id="button_3" href="">Button 3</a></li>
    <li class="level1"><a class="level1_a" id="button_4" href="">Button 4</a></li>
    <li class="level1"><a class="level1_a" id="button_5" href="">Button 5</a></li>
    <li class="level1"><a class="level1_a" id="button_6" href="">Button 6</a></li>
    </ul>
</li>
</ul>
</div>

Ответы [ 2 ]

2 голосов
/ 29 августа 2011

проще всего сделать

var that = this;

на уровне, который вы хотите сохранить this - и затем получить к нему доступ как that позже.

2 голосов
/ 29 августа 2011

Назначить элемент списка переменной, например, 

$(".block-buttons .level1 a.level1_a").click(function () 
{
    var listItem = $(this).parent('li');
    $.getJSON('api/1/test.json', //etc
...