2009-05-19 4 views
5

Я хочу добавить некоторые функции jQuery на наши сайты, где одна часть разметки будет иметь обработчик кликов, который должен будет вызвать действие для другого фрагмента разметки, то есть A является триггером для действия от B. Нет никакой гарантии относительно относительной структуры A и B, поэтому я не могу полагаться на селектор jQuery, плюс каждый уникальный A должен будет относиться только к его уникальному экземпляру B.О jQuery, Metadata и XHTML Compliance

Что такое общий консенсус в отношении наилучшего способа действовать в таких обстоятельствах?

Вариант 1: Кто заботится о соблюдении XHTML, он в любом случае переоценивается. У нас есть нетренированные производители веб-контента, способные вводить разметку на наш сайт, так что строгое соответствие XHTML было бы мечтой. Просто создайте атрибуты тегов и прочитайте их значения с помощью jQuery.

Example: 
<div class="jquery-feature-trigger" actson="targetID">Trigger</div> 

Вариант 2: Использовать атрибуты, которые выглядят как HTML, но не должны действительно быть использованы для этой цели.

Example: 
<div class="jquery-feature-trigger" rel="targetID">Trigger</div> 

Вариант 3: Использование пространств имен, как ASP.NET 4.0 настройки, чтобы сделать.

Example: 
<div class="jquery-feature-trigger" custom:actson="targetID">Trigger</div> 

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

Вариант 4: Сообщество переполнения стека имеет лучшую идею ... ???

ответ

8

Вы можете исследовать jQuery Metadata plugin, который может хранить метаданные JSON в атрибуте class (или различных других местах). Пример:

<div class="jquery-feature-trigger { actson: 'targetID' }">Trigger</div> 
+0

Это в основном вариант 2 – kizzx2

1

Есть ли способ сохранить информацию внутри метода данных jQuery? Сохраняет загромождают разметку

Для примера смотрите здесь

snipplr.com/view/9715/the-jquery-data-store/

или прямая документация

docs.jquery. com/Core/data # name

Я использовал его пару раз для хранения информации о моих элементах, очень полезная функция, которая, похоже, не очень широко известна!

К сожалению, не может размещать ссылки Я новый пользователь :(

1

Попробуйте это:

<html> 
<head> 


    <script src="scripts/jquery/jquery-1.2.6.min.js" type="text/javascript"></script> 
    <!--Using highlight effect to illustrate-->  
    <script src="scripts/jquery/jquery-ui-highlight.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     $(".jquery-feature-trigger").click(function(){ 
      $("#target-" + $(this).attr("id")).effect("highlight", {}, 6000); 

     }); 
}); 
</script> 

</head> 

<body> 

<div class="jquery-feature-trigger" id="1">Trigger 1</div> 
<div class="jquery-feature-trigger" id="2">Trigger 2</div> 
<div class="jquery-feature-trigger" id="3">Trigger 3</div> 
<div class="jquery-feature-target" id="target-1">Target 1</div> 
<div class="jquery-feature-target" id="target-2">Target 2</div> 
<div class="jquery-feature-target" id="target-3">Target 3</div> 

</body> 
</html> 

Так что я решил дать цель DIVS идентификатор «целевой х» и дать триггер DIVS идентификатор «X». Таким образом, при нажатии кнопки на спусковой крючок х он влияет на целевую «мишень-х».

Обратите внимание на линию, которая идет

$("#target-" + $(this).attr("id")) 

его в тот момент, когда вы получаете идентификатор щелкнутого div и объединяете его с «target-», и это становится идентификатором целевого div.

0

А как насчет ввода скрытых вводов div с соответствующими именами и идентификаторами? Таким образом, вы сохраняете XHTML. Таким образом, вы будете использовать так:

$("div_name").find("hidden_input_name").val() 
0

Я не знаю точно, что вы делаете, но будет это можно сделать триггер быть якорем тег, а затем дать цель на идентификатор? Как это:

<a href="#target1">Trigger 1</a> 
<div id="target1">Target 1</div> 

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

Если триггер 1 скрывает или показывает цель 1 или прокручивает к ней, этот метод будет иметь дополнительное преимущество в том, что он все еще что-то делает, если JavaScript отключен.

6

Я хотел бы использовать data- attributes для этого сейчас, несмотря на соответствие XHTML, например:

<div class="jquery-feature-trigger" data-actson="targetID">Trigger</div> 

Они являются особенностью HTML5, но не вызывает каких-либо проблем в HTML4/XHTML, кроме не является действительным атрибуты в валидаторе ... но из этого не возникает никаких реальных проблем.

jQuery также has added built-in support for these since jQuery 1.4.3 в методах .data().

+0

См. Также [HTML 5 data-Attributes] (http://ejohn.org/blog/html-5-data-attributes/) Джона Ресига –

 Смежные вопросы

  • Нет связанных вопросов^_^