ajax и элементы с одинаковым классом

168
10 марта 2019, 11:50

Есть несколько блоков с одинаковым классом, по тыку срабатывает функция, которая сравнивает текст блока с полем из таблицы в бд, и после выборки выводит по нему информацию. Пока был один блок с классом, на который было наложено событие, все прекрасно отрабатывало, добавил второй - перестало выводить что-либо. Собственно вопрос: Как нормально реализовать это, в дальнейшем блоки буду выводить циклом?

function getDetails() { 
var name = $('.catName').text(); 
 
$.ajax({ 
    type: 'POST', 
    url: 'demo.php', 
    data: {nickname:name}, 
    success: function (data) { 
        $('.catInfo').html(data); 
    } 
}); 
 
}
<div class="catName" id="cat1"  onclick="getDetails()">Мурзик</div> 
<div class="catName" id="cat2" onclick="getDetails()">Барсик</div>

<?php 
    $name = $_POST['nickname']; 
 
    $link = mysqli_connect("localhost","study","study","study_db"); 
    $query ="SELECT content FROM cats where namee= '$name' " ; 
 
    $result = mysqli_query($link, $query) or die("Ошибка " . mysqli_error($link)); 
    $row=mysqli_fetch_array($result); 
    echo $row['content']; 
    mysqli_free_result($result); 
 
?>

Answer 1

нормально реализовать это так:

$(".catName").click(getDetails); 
 
function getDetails(e) { 
  var div = this; 
  $.ajax({ 
    type: 'POST', 
    url: 'demo.php', 
    data: { 
      nickname: $(div).text() 
    }, 
    success: function(data) { 
      $(div).html(data); 
    } 
  }); 
  console.log("clicked - " + $(div).text()); 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="catName" id="cat1">Мурзик</div> 
<div class="catName" id="cat2">Барсик</div>

Answer 2

Вы в этой строчке получаете все элементы с селектором .catName, а это 2 элемента!, они будут склеиваться. var name = $('.catName').text();

READ ALSO
Всплывающее уведомление
PHP

Всплывающее уведомление

У меня есть кнопка, на которой вести функция: <div class="btn btn-v-1" style="margin-top:30px" type="text" onclick='SaveCountry();'>Upload</div> Как сделать, чтоб если функция отработала...

 126
как сравнить текущую строку и ту, которая появляется на ее месте при ajax запросе
PHP

как сравнить текущую строку и ту, которая появляется на ее месте при ajax запросе

как сравнить текущую строку и ту, которая появляется на ее месте при ajax запросеВ частности я хочу реализовать такой механизм, который будет...

 154
Что хранить в куки после авторизации
PHP

Что хранить в куки после авторизации

Какие данные записывать в куки после авторизации? Пароль, полагаю, хранить небезопасно, но какой идентификатор можно использовать, чтобы...

 150
Две функции на одной кнопке
PHP

Две функции на одной кнопке

На кнопке весит две функции onlick, но по какой-то причине выскакивает ошибка Unexpected end of input

 166