Вывод ajax результата в родительский span

140

04 октября 2019, 11:00

у меня имеется вот такой вид html:

<li class="file" id="ид для передачи в пхп"><a href="ссылка не играет роли">текст</a> <span id="size">Сюда передать результат</span></li>,

Я написал php обработчик, возвращающий результат и js-скрипт:

$(document).ready(function() {
$('.file').mouseenter(function(){
    $.post("/путь/до/обработчика.php", {f_size:$(this).attr('id')}, function(data) {
        $('#size').text(data); // Как добавить в span? $(this)?
        console.log(data); 
    });
    return false;
});  });

Но я не знаю, как передать результат в span объекта, на который я навёл мышь. <li> тегов в документе очень много, а результат возвращается только в первый, как можно вернуть результат в span, родителем которого является <li>, на который наведена мышь?

Answer 1

Как вариант:

$(document).ready(function() {
    $('.file').mouseenter(function(){
        let that = $(this);
        $.post("/file.php", {f_size:that.attr('data-id')}, function(data) {
            $(that).find('span').html(data);
            console.log(data);
        });
        return false;
  });
});

И не используйте одинаковые id. На страницу может быть только 1 уникальный id. Измените на data-id, если там передаётся только информация для PHP.

Answer 2

Посмотрите, создал прототип и описал действия, которые могут вызвать вопросы:

$(".file").each(function() { // проходим по всем .file 
  const id = $(this).attr('id'); // запоминаем id текущего .file 
 
  $(this).hover(function() { // вешаем событие hover на каждый .file 
    setTimeout(() => { // имитируем загрузку данных (спустя секунду) 
      const data = { // создаём фейковые данные 
        'id1': { 
          text: "some text 1" 
        }, 
        'id2': { 
          text: "some text 2" 
        } 
      } 
 
      $(`#${id} .size`).text(data[id].text); // подставляем в id текущего .file в его дочерний компонент .size текст из фейковых данных по ключу, который равен id 
    }, 1000); 
  }); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<ul> 
  <li class="file" id="id1"> 
    <a href="#">текст</a> <span class="size">Сюда передать результат</span> 
  </li> 
  <li class="file" id="id2"> 
    <a href="#">текст</a> <span class="size">Сюда передать результат</span> 
  </li> 
</ul>

Я не знаю как у Вас выдаёт результат на запрос Ваш обработчик (/путь/до/обработчика.php). Если у Вас выдаётся отдельно для каждого id своя data - тогда достаточно будет сделать .text(data.text);. Но лучше загрузить все данные единовременно при инициализации (если их не много) и подставлять по ключу уже на ховере, как в примере.