在href标签中的onMouseOver时，如何在jQuery中分配动态元素ID？

Question

我有3个超链接和由具有动态ID的PHP脚本随机生成的DIV。 例如，

<a href="http://www.example.com/find.php?id=xy1" id="xy1" onMouseover="analyze('final', 'xy1')">xy1</a>
<a href="http://www.example.com/find.php?id=ay2" id="ay2" onMouseover="analyze('final', 'ay2')">ay2</a>
<a href="http://www.example.com/find.php?id=am3" id="am3" onMouseover="analyze('final', 'am3')">am3</a>

<div id="xy1"></div>
<div id="ay2"></div>
<div id="am3"></div>

我想通过jQuery中的函数onMouseover analyze()显示基于onMouseover事件的一些文本。 例如，

function analyze(db, target) {
  jQuery.ajax({
    type: "GET",
    url:  "toThumb.php",
    data: 'db=' + db + '&id=' + target,
    success: function(output){ $("#"+target).html(output); }
  });
}

在这里，元素ID #xy1必须自动根据分配onMouseover事件。 像xy1作为变量名的值。 也许在接下来onMouseover事件将是AY2或AM3。

我试图设置$("#"+target).html(output); 失败了...如果我分别用$("#xy1").html(output); 或$("#ay2").html(output); 或$("#am3").html(output); 工作正常。

我的编码方式是否错误？ 或者，我可以使用this代替传递参数吗？

Answer 1

您可以使用.data（）

在您的html中，您必须像这样在data-target属性中传递ID。

例：-

<a href="http://www.example.com/find.php?id=xy1" data-target="xy1" onMouseover="analyze(this)">xy1</a>
<a href="http://www.example.com/find.php?id=ay2" data-target="ay2" onMouseover="analyze(this)">ay2</a>
<a href="http://www.example.com/find.php?id=am3" data-target="am3" onMouseover="analyze(this)">am3</a>

<div id="xy1"></div>
<div id="ay2"></div>
<div id="am3"></div>

然后在您的jquery中，您可以获得数据值。 并根据此数据值传递您的数据。

function analyze(this)
{
    var getTargetId = $(this).data("target");
    $("#"+getTargetId).html(data); 
}

Answer 2

首先，id在DOM中应该是唯一的。 代替它，您可以使用下面的类。

请检查下面的工作演示。

 function analyze(ele){ $("."+ele.id).html(ele.innerHTML); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="http://www.example.com/find.php?id=xy1" id="xy1" onMouseover="analyze(this)">xy1</a> <a href="http://www.example.com/find.php?id=ay2" id="ay2" onMouseover="analyze(this)">ay2</a> <a href="http://www.example.com/find.php?id=am3" id="am3" onMouseover="analyze(this)">am3</a> <div class="xy1"></div> <div class="ay2"></div> <div class="am3"></div> 

Answer 3

该问题是由于文档中的ID重复造成的。 根据W3C ：

id = ID

元素的唯一标识符。 文档中不得有多个具有相同ID值的元素。

另外，将项目显示在不同的容器中也是没有意义的，因为您也可以简单地使用PHP生成它们。

 function analyze(node) { $('#container').html(node.innerHTML /* whatever */); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container">(empty)</div> <a href="http://www.example.com/find.php?id=xy1" id="xy1" onmouseover="analyze(this)">xy1</a> <a href="http://www.example.com/find.php?id=ay2" id="ay2" onmouseover="analyze(this)">ay2</a> <a href="http://www.example.com/find.php?id=am3" id="am3" onmouseover="analyze(this)">am3</a> 

Answer 4

感谢Rahul Patel 。 我在编码中做了三处更改。

（1）移除id

<a href="http://www.example.com/find.php?id=xy1" onMouseover="analyze('final', 'xy1')">xy1</a>
<a href="http://www.example.com/find.php?id=ay2" onMouseover="analyze('final', 'ay2')">ay2</a>
<a href="http://www.example.com/find.php?id=am3" onMouseover="analyze('final', 'am3')">am3</a>

（2）将id更改为class

<div class="xy1"></div>
<div class="ay2"></div>
<div class="am3"></div>

（3）更改了$("#"+target).html(output); 到$("."+target).html(output);

现在问题解决了...