3

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

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

?>

2 ответа 2

3

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

$(".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>

0

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.