如何在jQuery中分配动态元素id当onMouseOver在一个href标签 - How to assign dynamic element id in jQuery when onMouseOver in a href tag?

我有3个超链接和div随机生成的PHP脚本与动态id。例如,

<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中的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而不是传递参数吗?

可以使用。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); 
}

首先，id在DOM中应该是唯一的。你可以像下面这样使用class来代替它。

请查看下面的工作演示。

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>

问题是由于文档中重复的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>

感谢拉胡尔·帕特尔。我对代码做了三处修改。

(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) change $("#"+target).html(output); to $("."+target).html(output);

问题解决了…