使用Jquery在输入类型图像的悬停时添加div

Let's say I can not modify html elements except through a script.

假设我不能通过脚本修改html元素。

I have a page that has several buttons They do not have IDs
Goal is simple:
Float a div under the buttons to add "tips" and information what they are for

我有一个页面有几个按钮他们没有ID目标很简单:在按钮下面浮动一个div来添加“提示”和信息它们是什么

This mess of a erp system has some odd cluetip jquery stuff running. I was able to dynamically add title attribute but then had problems turning it into a tool tip type thing. So I abandoned that esp since it was noted code is no longer supported. I decided jquery and hide/ show divs

这个混乱的erp系统有一些奇怪的cluetip jquery运行的东西。我能够动态添加title属性,但后来遇到了将其变成工具提示类型的问题。所以我放弃了esp,因为它被注意到不再支持代码。我决定jquery并隐藏/显示div

I am new to jquery

我是jquery的新手

So two things 1) This script below only triggers the first div - oddly nothing happens for the second and third ?

所以有两件事1)下面这个脚本只触发第一个div - 奇怪的是第二个和第三个没有任何反应?

2) If I have 7 buttons - can I name the div id the same as my buttons and use a (this) to reference. I tried unsuccessfully . But it seems much more efficient then writing 8 conditions literally referencing them.

2)如果我有7个按钮 - 我可以将div id命名为与我的按钮相同并使用(this)来引用。我没试成功。但它似乎比编写引用它们的8个条件更有效。

Too much time so I'm looking to all you insanely talented jquery to help pinpoint why this isn't working for me and how to go about it.

太多的时间,所以我期待你所有你疯狂的天赋jquery,以帮助找出为什么这不适合我,以及如何去做。

Code is

    <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

编辑发布

This will help... here is how the button appears on the page.
You'll notice I'm referencing the class since it doesn't have an ID attribute

这将有所帮助......这是按钮在页面上的显示方式。您会注意到我正在引用该类,因为它没有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.">

1 个解决方案

#1

Assuming you have only one class on each button, you can try something like :

假设每个按钮上只有一个类,您可以尝试以下方法:

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/

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

The coma in the jQuery selector lets you have as many selectors as you need in the same set.

jQuery选择器中的昏迷使您可以在同一组中拥有所需数量的选择器。

You could have done this this way too :

你也可以这样做:

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

or if you need to do it sequentially/programmatically :

或者如果您需要按顺序/编程方式执行此操作:

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

#1