如何在hQuery标签中的onMouseOver时在jQuery中分配动态元素ID?
我有3个超链接和DIV随机生成的PHP脚本与动态ID。例如,如何在hQuery标签中的onMouseOver时在jQuery中分配动态元素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
而不是传递参数吗?
感谢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);
现在问题解决了...
您可以使用.data()
在你的HTML你必须通过你的ID在这样的数据target属性。
例子: -
<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);
}
$(“#”+ getTargetId).html(data);'不会更改为(例如)$(“#xy1”)。html(data);'。它仍然是一样的。 –
首先,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>
谢谢。你的代码很有趣,有些工作。但是,并不像我预期的那样。 –
问题是由于文档中重复的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>
我的目标不是捕获身份证。我正在尝试仅在特定的DIV中显示文本。 –
@ ak-SE,嗯,我没有提到捕获一个ID。事实上,你不需要捕获ID。那么,我的答案包含一个“显示文本特别是DIV”的示例代码。您可以轻松地用另一个值替换节点ID。 –
对不起,我的话。我不是那个意思。其实我想分配一个动态ID,像'$(“#xy1”)。html(output ....);'。这里,id xy1必须自动改变。输出将基于Ajax显示。我刚刚阐述了我的问题。 –
不要两次使用相同的ID。 – shubham715