VPF::Как можно запонить выбранный элемент?

Illdisposed

Дата 18.12.2012, 14:37 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 49
Регистрация: 10.3.2012

Репутация: нет
Всего: нет

Здравствуйте!
У меня есть такой код:

Код


<!DOCTYPE HTML>
<html>
<head>
  <title></title>
  <style>
  .photo-inputs__item {
    float: left;
    width:90px; height:90px;
    border: 1px solid red;
    list-style:none;
  }
  .photo-uploader__control {
    display:none;
  }

  </style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script>
$(function () {
  'use strict';
  $(".photo-inputs__item").click(function () {
    $("#image-upload").trigger('click');
    return false;
  });
  $('#image-upload').change(function (event) {
    // ЗДЕСЬ необходимо узнать щелчек по какому квадрату вызвал появление диалога
  });
});</script>
</head>
<body>
<div class="photo-uploader">
  <ul>
    <li class="photo-inputs__item"></li>
    <li class="photo-inputs__item"></li>
    <li class="photo-inputs__item"></li>
    <li class="photo-inputs__item"></li>
  </ul>
  <input class="photo-uploader__control" id="image-upload" type="file" multiple />
</div>
</body>
</html>

Я хочу в обработчике $('#image-upload').change(function (event) { ... } Узнать щелчек по какому из квадратов инициировал открытие окна. Я новичок, поэтому прошу прощения за такой вопрос. У меня приходит на ум только сделать переменную сразу за 'use strict' и хранить там состояние, однако мне этот вариант не нравиться. Как вариант еще можно во время щелчка на квадрате добавлять к нему класс, который будет его помечать, но как его убрать, если пользователь просто закрое диалог и не выберет файл. Буду благодарен за помощь!

Это сообщение отредактировал(а) Illdisposed - 18.12.2012, 14:43

Illdisposed

Дата 18.12.2012, 15:02 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 49
Регистрация: 10.3.2012

Репутация: нет
Всего: нет

Как вариант можно добавить свойство в DOM элемент выбора файла, а потом его удалять в .change. Только не знаю насколько это хорошо.

Aliance

Дата 18.12.2012, 15:51 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 7
Всего: 137

Вариант №1

jQuery Event object

Цитата

As of jQuery 1.6, you can also pass an object to jQuery.Event() and its properties will be set on the newly created Event object.

Пример

Добавлено @ 15:54

Вариант №2

jQuery trigger

Цитата

When we define a custom event type using the .bind() method, the second argument to .trigger() can become useful. For example, suppose we have bound a handler for the custom event to our element instead of the built-in click event as we did above:

Код


$('#foo').bind('custom', function(event, param1, param2) {
  alert(param1 + "\n" + param2);
});
$('#foo').trigger('custom', ['Custom', 'Event']);

The event object is always passed as the first parameter to an event handler, but if additional parameters are specified during a .trigger() call, these parameters will be passed along to the handler as well. To pass more than one parameter, use an array as shown here. As of jQuery 1.6.2, a single parameter can be passed without using an array.

Note the difference between the extra parameters we're passing here and the eventData parameter to the .bind() method. Both are mechanisms for passing information to an event handler, but the extraParameters argument to .trigger() allows information to be determined at the time the event is triggered, while the eventData argument to .bind() requires the information to be already computed at the time the handler is bound.

Пример

Это сообщение отредактировал(а) Aliance - 18.12.2012, 15:56

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Illdisposed

Дата 18.12.2012, 16:30 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 49
Регистрация: 10.3.2012

Репутация: нет
Всего: нет

Aliance, тут проблема в другом событие change инициирую не я в коде (а пользователь когда выбирает файл(ы)) и передать туда в Event object что-то свое я не могу. Но за ответ спасибо. (Плюс за мной, наберу только сотню).

Aliance

Дата 18.12.2012, 16:45 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 7
Всего: 137

Вот так же сделать можешь. Зачем нужно именно в change оно? По факту ведь разница не велика click = beforeCallback, change = afterCallback.
Если нужно принципиально в change - можно сохранять в глобальную переменную, т.к. change в данном случае без click невозможен.

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Illdisposed

Дата 18.12.2012, 17:09 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 49
Регистрация: 10.3.2012

Репутация: нет
Всего: нет

Aliance, крутая штука этот http://jsfiddle.net! Спасибо! Я не знал про такую вещь. Как освобожусь в ней покажу что я хочу сделать!

Illdisposed

Дата 18.12.2012, 20:06 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 49
Регистрация: 10.3.2012

Репутация: нет
Всего: нет

Aliance,
Вот: http://jsfiddle.net/Leonid/RR6hG/2/

Это сообщение отредактировал(а) Illdisposed - 18.12.2012, 20:09

Alinera

Дата 18.12.2012, 23:30 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 1
Регистрация: 18.12.2012
Где: Чехов

Репутация: нет
Всего: нет

Цитата(Illdisposed @ 18.12.2012, 15:02

)

потом его удалять в .change. Только не знаю насколько это хорошо.

это не есть айс

Illdisposed

Дата 19.12.2012, 04:39 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 49
Регистрация: 10.3.2012

Репутация: нет
Всего: нет

Alinera, эх... сказал бы мне кто-нибудь, как есть айс. Да, и почему это не айс?

Это сообщение отредактировал(а) Illdisposed - 19.12.2012, 04:41

Aliance

Дата 19.12.2012, 14:24 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 7
Всего: 137

Illdisposed, я не понимаю принципиальной разницы между тем, что я предложил последним и тем, что нужно. Отличия только в событиях, но повторюсь мне кажется не принципиальным использование click или change исходя из поставленной задачи.

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Illdisposed

Дата 19.12.2012, 20:09 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 49
Регистрация: 10.3.2012

Репутация: нет
Всего: нет

Aliance, ну смотрите. При щелчке надо запомнить элемент на котором щелкнули. И показать окно выбора файла. А когда у input type=file инициируется событие onchange можно будет ивзлечь выбранные files.
Но я понял что делаю как не будет работать в IE, а в опере таким образом не получается открыть дилог выбора файла.

Aliance

Дата 24.12.2012, 11:35 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 7
Всего: 137

Цитата(Aliance @ 18.12.2012, 17:45

)

можно сохранять в глобальную переменную, т.к. change в данном случае без click невозможен.

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »