Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Применение библиотек > Как можно запонить выбранный элемент?


Автор: Illdisposed 18.12.2012, 14:37
Здравствуйте!
У меня есть такой код:
Код

<!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, 15:02
Как вариант можно добавить свойство в DOM элемент выбора файла, а потом его удалять в .change. Только не знаю насколько это хорошо.

Автор: Aliance 18.12.2012, 15:51
Вариант №1

http://api.jquery.com/category/events/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.


http://jsfiddle.net/Aliance/uTTkJ/

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

Вариант №2

http://api.jquery.com/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.


http://jsfiddle.net/Aliance/uTTkJ/1/

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

Автор: Aliance 18.12.2012, 16:45
http://jsfiddle.net/Aliance/uTTkJ/3/ же сделать можешь. Зачем нужно именно в change оно? По факту ведь разница не велика click = beforeCallback, change = afterCallback.
Если нужно принципиально в change - можно сохранять в глобальную переменную, т.к. change в данном случае без click невозможен.

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

Автор: Illdisposed 18.12.2012, 20:06
Aliance
Вот: http://jsfiddle.net/Leonid/RR6hG/2/

Автор: Alinera 18.12.2012, 23:30
Цитата(Illdisposed @  18.12.2012,  15:02 Найти цитируемый пост)
 потом его удалять в .change. Только не знаю насколько это хорошо. 

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

Автор: Illdisposed 19.12.2012, 04:39
Alinera, эх... сказал бы мне кто-нибудь, как есть айс. Да, и почему это не айс?

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

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

Автор: Aliance 24.12.2012, 11:35
Цитата(Aliance @  18.12.2012,  17:45 Найти цитируемый пост)
 можно сохранять в глобальную переменную, т.к. change в данном случае без click невозможен. 


Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)