Question

我有三个超链接和由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()事件显示一些文本。例如，

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

此处，必须根据#xy1事件自动分配元素ID onMouseover。像 xy1 一样，作为变量名的值。也许在下一个onMouseover活动中，它将是 ay2 或 am3 。

我尝试使用$("#"+target).html(output);进行设置失败...如果我使用$("#xy1").html(output); OR $("#ay2").html(output);或$("#am3").html(output);进行单独测试，则可以正常使用。

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

Answer 1

您可以使用.data()

在你的html中，你必须像这样在数据目标属性中传递你的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重复造成的。根据{{3}}：

id = ID

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

此外，在不同容器中显示项目没有任何意义，因为您可能只是使用PHP生成它们。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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);

现在问题解决了......

如何在href标记中的onMouseOver中在jQuery中分配动态元素id？

4 个答案: