Jquery PHP / Mysql менеджер изображений

Question

В данный момент я работаю над CMS и ищу подходящий менеджер изображений Jquery / Php, но не могу найти ничего, что бы действительно отвечало моим потребностям. Поэтому я решил попробовать создать менеджер изображений самостоятельно. Плохая новость в том, что я не особо разбираюсь в Jquery ... на самом деле я знаю очень мало. Но я работаю над этим.

В конечном результате отобразится неупорядоченный список изображений.

<ul>
<li><a href="#" id="imgid"><img src="imgsrc" /></a></li>
<ul>

Когда пользователь нажимает на изображение, идентификатор этого изображения отправляется в функцию Jquery и сохраняется в массиве. Изображение подсвечивается рамкой, добавленной addclass (). Если пользователь нажимает на последующее изображение, этот идентификатор изображения также отправляется в массив Jquery, а второе изображение также выделяется.

Это продолжается до тех пор, пока пользователь не нажмет другие изображения. Естественно, если пользователь нажимает на изображение, которое уже содержится в массиве Jquery, оно удаляется, а выделенный эффект также удаляется.

После этого пользователь выберет элемент каталога из меню выбора, которое находится под списком изображений. Идентификатор этого предмета также передается в Jquery.

Когда пользователь нажимает кнопку «Отправить», массив Jquery и выбранный идентификатор отправляются в сценарий PHP, который обновляет таблицу MySQL, связывая идентификатор изображения с идентификатором элемента каталога.

Где я сейчас нахожусь ... У меня есть прекрасный неупорядоченный список изображений.

Мои вопросы

1. Как отправить идентификатор изображения в массив jquery, а затем удалить этот идентификатор, если снова нажать на то же изображение
2. Как отправить массив Jquery в скрипт PHP для выполнения

В данный момент у меня есть кое-что из этого, работающее с фрагментами кода, но поскольку Jquery далек от моей сильной стороны, я просто промываю и повторяю, пока не получу правильный код. Любая помощь будет отличной.

Mark

Итак, я пробовал этот фрагмент кода, но думаю, что мог бы быть написан лучше.

$(document).ready(function() {
    $("img").click(function(event) {
        var test = (event.target.id);
        if($('img[id=' + test + ']').is('.error'))
            $('img[id=' + test + ']').removeClass("error");
        else
            $('img[id=' + test + ']').addClass("error");
    });
});
</script>

Конечно, есть еще один способ нацеливания на img id без необходимости использовать 'img [id =' + test + ']'

Mark

Отредактировано снова

$(document).ready(function() {
    $("img").click(function(event) {
        var img_id = (event.target.id);
        var imgArray = new Array();
        if($('img[id=' + img_id + ']').is('.selected')) {
            $('img[id=' + img_id + ']').removeClass("selected");
            $('span[id=check_' + img_id + ']').removeClass("check-ok");
            removeArray();
            }
        else {
            $('img[id=' + img_id + ']').addClass("selected");
            $('span[id=check_' + img_id + ']').addClass("check-ok");
            addArray();
            }
        function removeArray() { 
            alert('Removing from the array');
            }
        function addArray() {
            alert('Adding into the array');
            }
        });
    });

Попытка выяснить, как вставить изображения в массив, а затем удалить их из массива.

Answer 1

Я не совсем уверен, что делают все биты вашего кода, но что-то вроде этого должно, по крайней мере, сделать его немного более сухим:

function showMessage(selected) {
    if( true === selected )
      {
      alert('Removing from the array');
      }
    else
      {
      alert('Adding to the array');
      }
}

$(document).ready(function() {
    $('img').click(function(event, ui)
      {
      $(this).toggleClass('selected');
      var id = $(this).attr('id');
      $('#check_' + id).toggleClass('check-ok');
      showMessage( $(this).hasClass('selected') );
      });
});

И в jsfiddle (хотя я заменил img на div для скорости).