Как я могу использовать несколько диалогов с плавающей справкой, используя «класс» вместо «id»?

Question

Мне нужно использовать несколько всплывающих диалоговых окон справки на странице. Я попробовал это с помощью «display: block» и «display: none» и использовал ID в JavaScript. Я не могу использовать классы, так как у меня их несколько на одной странице, и если я использую классы, то все они будут отображаться / скрываться одновременно. Тем не менее, по мере увеличения количества элементов справки на странице, я должен вернуться к JavaScript и добавить больше строк ...

например:

$(document).ready(function() { 
   $("#help-icon1").click(function() {
         $('#help-details1').css('display', 'block');
      });

   $("#help-icon2").click(function() {
         $('#help-details2').css('display', 'block');
      });

   $("#help-icon3").click(function() {
         $('#help-details3').css('display', 'block');
      });

});

У каждого из них также есть значки закрытия, и они должны исчезнуть, если щелкнуть по значку закрытия или щелкнуть в любом месте страницы. Это означает, что я должен написать функции javascript 3 раза для всех различных значков закрытия.

Я пытался положиться на функцию "next" в jquery, но поскольку между областями, где находится значок справки и текстом справки, много слоев (div / p / span), он становится проблематичным. Любая идея или лучший способ решить эту проблему?

Заранее спасибо.

Answer 1

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

jQuery(".help-icon").click(function() {
    jQuery(this).css('display', 'block');
});

Answer 2

Давайте просто предположим, что вам нужно использовать идентификаторы по неизвестной причине.Вот ваш ответ, чтобы объединить усилия:

$("#help-icon1").add("#help-icon2").add("#help-icon3").click(function() {
    $(this).css('display', 'block');
});

Что равняется:

$("#help-icon1, #help-icon2, #help-icon3").click(function() {
    $(this).css('display', 'block');
});

Но на самом деле вам не нужно использовать уникальные идентификаторы, как это, без веских причин.1007 *

Answer 3

Если все ваши значки справки имеют один и тот же класс, вы можете использовать функцию each jQuery для их циклического просмотра, извлечения связанного идентификатора, замените «icon» на «detail» в id (так что# help-detail3), а затем используйте его для обновления панели.Что-то вроде:

$(".help-icon").each(function() {
    var detailsId = $(this).attr("id").replace("icon", "details");
    $("#" + detailsId).css('display', 'block');
});

Answer 4

Я не делал этого с помощью JQuery, но вам нужен «ненавязчивый javascript».

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

<img src="pic1.png" onMouseover="this.src='hi_pic1.png';" />

так что все они ведут себя одинаково. Дайте им класс:

<img src="pic1.png" class="hi" />

Затем во время загрузки, в сценарии в конце вашей страницы, в стиле Yahoo, вы пишете инициализацию в - захватить каждый элемент класса - добавить события, которые вы хотите - установить событие для использования соответствующих данных, например, используя это и используя систематические имена, такие как pic1 -> hi_pic1.

Надеюсь, это поможет, Charles

Answer 5

Вы пробовали использовать функцию jQuery .each ?

РЕДАКТИРОВАТЬ : Как показано ниже

$(".help-icon").each(function(idx, elm){
    elm.click(function(){
      ...
    })
});

Answer 6

Вы можете добавить дополнительные имена классов к элементу.

По умолчанию div может быть скрыт, и к нему может быть добавлен новый класс - чтобы «отменить» предыдущий стиль (отсюда и название Cascading Style Sheets)

<div class="hidden exception"></div>

Если щелкнуть элемент, вы можете добавить новое имя класса, например, так:

 $('.target').addClass('newclass');

больше информации:
http://api.jquery.com/addClass/