Question

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

我有一个有几个按钮的页面他们没有身份证目标很简单：
在按钮下面浮动div以添加“提示”和信息

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

我是jquery的新手

所以有两件事 1）下面这个脚本只触发第一个div - 奇怪的是第二个和第三个没有任何结果？

2）如果我有7个按钮 - 我可以将div id命名为与我的按钮相同并使用（this）来引用。我尝试失败了。但它似乎比写出引用它们的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>

编辑发布

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

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

1 个答案: