Использование JQuery для добавления div на наведение типа ввода изображения

Question

Предположим, я не могу изменять элементы html, кроме как через скрипт.

У меня есть страница, которая имеет несколько кнопок Они не имеют IdS
Цель проста:
плыви ДИВ под кнопками, чтобы добавить «советы» и информацию, что они являются для

Этот беспорядок в системе erp есть некоторые нечетные cluetip jquery stuff running. Я смог динамически добавлять атрибут title, но затем возникли проблемы с его превращением в предмет типа подсказки. Поэтому я отказался от этого esp, так как был отмечен код больше не поддерживается. Я решил Jquery и скрыть/показать DIVS

Я новичок в JQuery

Так две вещи 1) Этот сценарий ниже только триггерами первый DIV - как ни странно ничего не происходит для второго и третьего?

2) Если у меня есть 7 кнопок - могу ли я назвать идентификатор div так же, как и мои кнопки, и использовать ссылку (эта) для ссылки. Я пробовал безуспешно. Но это кажется намного более эффективным, чем написание 8 условий, буквально ссылающихся на них.

Слишком много времени, поэтому я ищу все, что вы безумно талантливый jquery, чтобы помочь определить, почему это не работает для меня и как это делается.

Кодекс

<script> 
$(".ShoppingList_UpdateListButton").hover(
    function() { 
    $("div#ShoppingList_UpdateListButton").show(); 
    }, 
    function() { 
    $("div#ShoppingList_UpdateListButton").hide(); 
    } 
); 
$(".ButtonAddListToCart").hover(
    function() { 
    $("div#ButtonAddListToCart").show(); 
    }, 
    function() { 
    $("div#ButtonAddListToCart").hide(); 
    } 
); 
$(".ButtonEmptyList").hover(
    function() { 
    $("div#ButtonEmptyList").show(); 
    }, 
    function() { 
    $("div#ButtonEmptyList").hide(); 
    } 
); 

</script> 
<div id="ButtonEmptyList" style="display: none;">Click this to DELETE this list.</div> 
<div id="ButtonAddListToCart" style="display: none;">Click this to add ENTIRE list above, and current quantities displayed to your shopping cart.</div> 
<div id="ShoppingList_UpdateListButton" style="display: none;">Click this to update your list. </div> 

EDIT TO POST

Это поможет ... вот как на странице появится кнопка.
Вы заметите, что я ссылки на класс, так как он не имеет атрибут ID

<input type="image" name="ButtonUpdateList" src="/contentonly.aspx?file=images/buttons/updatelist_b.gif" class="ShoppingList_UpdateListButton" title="Click this to update your list."> 

Answer 1

Если у вас есть только один класс на каждой кнопке, вы можете попробовать что-то вроде:

HTML:

<button class="ref1">REF1</button> 
<div id="ref1">REF1's div ...</div> 
<button class="ref2">REF2</button> 
<div id="ref2">REF2's div ...</div> 
<button class="ref3">REF3</button> 
<div id="ref3">REF3's div ...</div> 

JS:

$('.ref1, .ref2, .ref3') 
.hover(function() { 
    var myClass = $(this).attr('class'); 
    $('#' + myClass).show(); 
}, function(){ 
    var myClass = $(this).attr('class'); 
    $('#' + myClass).hide(); 
}); 

JSFIDDLE: http://fiddle.jshell.net/msieurtoph/rwj59m8d/

---

кома в селекторе JQuery позволяет иметь столько селекторы, сколько вам нужно в одном наборе.

Вы могли бы сделать это таким образом, тоже:

$('.ref1').add('.ref2').add('.ref3').hover(...); 

или, если вам нужно сделать это последовательно/программно:

mySelection = $('.ref1'); 
mySelection = mySelection.add('.ref2'); 
mySelection = mySelection.add('.ref3'); 
mySelection.hover(...);