Назначение селекторов переменным для их вызова в зависимости от типа кнопки

Question

Это лучшее описание, которое я мог придумать. Я обычно не пишу, но честно не могу понять.

Все еще в режиме обучения jquery, и в основном я хочу добиться того, чтобы в зависимости от типа отправляемой кнопки скрипт назначал переменные элементам div на странице. То, что я делаю, - это административная сторона пользовательского скрипта, которая позволяет им обновлять тот конкретный div, который появляется на странице.

Когда я вставляю фактические селекторы, скрипт работает.

Когда страница загружается, она берет поле базы данных, соответствующее значку, и загружает его. Как только они нажмут кнопку обновления, появится новый div. Администратор вводит свои новые данные (новую информацию, которую он хочет отобразить), обновляет таблицу mysql, а затем возвращает ее через ajax jquery.

Извините за длинное объяснение. Как я уже сказал, я никогда не публиковал сообщения, просто всегда любил выяснять это самостоятельно. страница php

<?php //
if(isLoggedIn())
{
echo '<button id="adultClassButton">Edit Class Information</button>';
}
?>
<div class="class" id="adultClass"><?php
$row = checkPost('adult');
echo $row['info'];
?>
</div>

<?php


echo '<div id="adultClassInput">
  <textarea rows="2" cols="80" id="adultClassUpdate"></textarea>
  <input type="hidden" id="className" name="adult"/>
  <button id="adult">Save the Updated Class Info</button></div>';

?>

файл javascript (jquery)

$(".button").click(function(){
var button = $(this).attr('id');
if (button == 'adult'){

    var classDiv = $("#adultClass");
    var className = $("#className");
    var classDesc = $("#adultClassUpdate").val();
    var classUpdateDiv = $("#adultClassInput");
    postData(classDiv, className, classDesc, classUpdateDiv);
}
});

function postData(classDiv, className, classDesc, classUpdateDiv){
$.ajax({
url: 'insert.php',
type: 'POST',
data: "name="+ className+ "& info="+ classDesc,
success:function(data){
$("#" + classDiv).html(data);
}
})
$("#" + classDesc).val('');
$("#" + classUpdateDiv).hide();
}

Как я уже сказал, если у меня есть нормальные селекторы в функции, она работает как задумано. Но на данный момент, я просто озадачен тем, что не так.

Спасибо большое!

Answer 1

classDiv - это объект jquery, а не идентификатор элемента.Поэтому, когда вы используете это

$("#" + classDiv).html(data);

Это не работает, как ожидалось.

Попробуйте

classDiv.html(data);

Answer 2

Ваша функция должна быть такой:

function postData(classDiv, className, classDesc, classUpdateDiv){
  $.ajax({
    url: 'insert.php',
    type: 'POST',
    data: {"name": className.val(), "info": classDesc}
    success:function(data){
      classDiv.html(data);
    }
  })
  $("#"+classDesc).val('');
  classUpdateDiv.hide();
}

потому что вы уже передали объекты jquery ( не строки ) в вашу функцию, за исключением classDesc.

Надеюсь, это поможет. Приветствия