Внедрение параметров JQuery в bind / click против встроенных обработчиков кликов с параметрами - PullRequest
Новая
       5

Внедрение параметров JQuery в bind / click против встроенных обработчиков кликов с параметрами

2 голосов
/ 14 декабря 2010

Так что старый поклонник JavaScript и молодой волшебник jQuery во мне имеют небольшое разногласие. Извините за долгую настройку, но суть проблемы заключается в том, вставлять ли код onClick прямо в мой HTML или использовать стиль jQuery и использовать bind() или click(). .Я и сам не соглашался по этой теме довольно часто, поэтому я подумал, что постараюсь создать некоторую дискуссию по этому вопросу.Чтобы объяснить проблему, шаблон, представленный ниже, чаще всего выдвигает это на первый план.

Типичный пример

Я пишу поиск в каталоге участников.На моем интерфейсе у меня есть различные критерии фильтра, такие как "пол", "член с" и "имеет фотографию профиля".Критерий выглядит следующим образом ...

alt text

  • Пользователь может выбрать параметр, щелкнув текст (например, «Женский») или выбрав переключатель.
  • Когда выбор сделан, выбран соответствующий переключатель, текст выделяется жирным шрифтом

Мой HTML выглядит примерно так ... 

    <div id="FilterContainer_GenderDIV">
        <span id="FilterLabel_Gender">Gender:</span>
        <span id="FilterSelection_Gender">Any</span>
        <span id="FilterChicklet_Gender" class="sprite_MediumArrowDown inline" ></span>
    <div id="FilterOptions_GenderDIV">
        <input type="radio" id="GenderID" name="GenderID" value="1"/> <a href="" id="FilterOptionLink_CoupleGender_1" >Male</a><br />
        <input type="radio" id="GenderID" name="GenderID" value="2"/> <a href="" id="FilterOptionLink_CoupleGender_2" >Female</a><br />
        <input type="radio" id="GenderID" name="GenderID" value="0" checked="checked"/> <a href="" id="FilterOptionLink_CoupleGender_0" class="SearchSelectedChoice" >Any</a><br />
    </div>

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

Варианты, чтобы заставить его работать

jQuery Injection с умными именами элементов

Я могу использовать jQuery для привязки к моим элементам в общем виде.$('#FinderBodyDIV input:radio').click(SearchOption_Click); Затем разберитесь с соответствующим ID и текстом с умным осмотром.Например, имя моей гиперссылки можно назвать GenderID_Link_1, где 1 - это идентификатор, который я должен выбрать, а GenderID говорит мне, какую радиостанцию ​​изменить.Я мог бы использовать комбинацию '.parents () .find () and .siblings () `, чтобы найти радио по соседству и установить его с идентификатором.

  • Этохорошо, потому что мой код привязки прост, а мой jQuery отделен от моего HTML
  • Это плохо, потому что мой код функционирует сейчас действительно зависит от хрупкой структуры и именования HTML.

Связывайте элементы по отдельности с помощью eventData

Альтернативный вариант - собрать мой набор элементов и для каждого отдельного элемента выполнить передачу 'bind ()' eventData.

var elements = $('#FinderBodyDIV input:radio');
elements.each (   FunctionWithLogicToBindPassingEventData );
  • Это удовлетворяет, потому что я отделил логику для привязки данных о событиях от хрупкой структуры HTML.
  • Это плохо, потому что я просто переместил хрупкий кусок в новую функцию
  • Это также плохо, потому что я ввел замедленное (относительно) связывание (больше обход DOM).

Вставить код onClick в HTML

Это то место, где меня продолжают проявлять мои старые склонности к JavaScript.Вместо того, чтобы использовать jQuery для вставки привязок, я изменил HTML-код моей ссылки / переключателя, чтобы включить обработчики щелчков.Что-то вроде ... 

<input type="radio" id="GenderID" name="GenderID" value="1" onClick="SetGender(1,'Male')"/> <a href="" id="FilterOptionLink_Gender" onClick="SetGender(1,'Male')">Male</a><br />
  • Это удовлетворяет, потому что я знаю значения, когда я генерирую HTML, поэтому я упростил свою жизнь.
  • У меня естьубрал много зависимостей от моей структуры HTML (хотя и не все).
  • С другой стороны, я смешал JS и HTML.
  • Это выглядит грязно.

Так что же делать мальчику?

Это похоже на довольно распространенный сценарий.Я обнаружил, что это всплывает в довольно многих ситуациях, кроме той, что я описал выше.Я искал трубы на интернет-страницах, блогах и технических статьях в твиттере.Тем не менее, я не вижу никого, кто бы говорил об этой проблеме.Может быть, я просто не знаю, как сформулировать проблему.Безотносительно причины я не чувствую себя хорошо относительно любого решения, которое я придумаю.

На самом деле все сводится к тому, как связать элемент, по которому щелкнули, и связанные с ним данные - JSON, встроенные в имена HTML или другие.Итак, что вы берете?

1 Ответ

0 голосов
/ 14 декабря 2010

Ответ на этот вопрос заключается в том, что встраивание вызова onClick в элемент ввода противоречит ненавязчивой концепции javascript. Тем не менее, я являюсь разработчиком, который все равно будет использовать его, если он выполнит работу, и аудитория вряд ли отключит JavaScript.

Если я правильно понимаю проблему, вам нужен способ делать вещи в стиле jQuery, не полагаясь на структуру html и тому подобное. Присвойте своим радио-кнопкам имя класса, например, у радио-кнопки "Male" может быть class = "Male", и вы можете выбрать ее через jQuery проще.

Бонус: в некоторых случаях вам может потребоваться назначить некоторому элементу более одного класса, например, вы фильтруете по языку и по стране. Таким образом, вы можете назначить некоторому элементу несколько классов, например: 

$('#someElement').addClass('French').addClass('fr-FR');

И выберите его позже, используя любой класс.

...