Question

我在这里感到非常沮丧。

我有一张记录表。每条记录旁边都有一个按钮。单击该记录旁边的按钮，应执行jquery AJAX调用。

    <script language="JavaScript" type="text/javascript">
<!--
function swapContent(cv) {
    $("#myDiv").html('<div align="center"><img src="images/loader.gif"/></div>').show();
    var url = "process.php";
    $.post(url, {contentVar: cv} ,function(data) {
       $("#myDiv").html(data).show();
    });
}
//-->
</script>

关联的HTML：

<div id="myDiv" align="center"><a href="#" onClick="return false" onmousedown="javascript:swapContent('do_stuff');"><img src='images/icon.png' border='0'></a></div>

当我点击HTML链接时，div“myDiv”的内容被更改为ajax调用process.php的输出。这一切都很好，但我会有几十个div，我需要能够不仅使用参数cv调用swapContent函数，而且还传入一个div应该更改其内容的参数。 / p>

我相信我的错误只是基于对JS语法的无知。例如，我已经这样做了：

    <script language="JavaScript" type="text/javascript">
<!--
function swapContent(thediv,cv) {
    $(thediv).html('<div align="center"><img src="images/loader.gif"/></div>').show();
    var url = "process.php";
    $.post(url, {contentVar: cv} ,function(data) {
       $(thediv).html(data).show();
    });
}
//-->
</script>

但我不确定当它应该是一个对象或可能是什么问题时，是否将变量thediv视为一个字符串。

我很感激您的任何帮助！

<div id="div1" align="center"><a href="#" onClick="return false" onmousedown="javascript:swapContent('div1','do_stuff');"><img src='images/icon.png' border='0'></a></div>
...
<div id="div2" align="center"><a href="#" onClick="return false" onmousedown="javascript:swapContent('div2','do_stuff');"><img src='images/icon.png' border='0'></a></div>

Answer 1

当你将div的id传递给函数时所以，代替$(thediv) - ＆gt; $("#"+thediv)将有效

Answer 2

你已经完成了大部分工作:)。现在使用this对象。 http://jsbin.com/evirun/2/edit#source（创建一个示例，说明如何找到正确的调用div元素）

<div id="div1" align="center"><a href="#" onClick="return false" onmousedown="javascript:swapContent(this,'do_stuff');"><img src='images/icon.png' border='0'></a></div>

<div id="div2" align="center"><a href="#" onClick="return false" onmousedown="javascript:swapContent(this,'do_stuff');"><img src='images/icon.png' border='0'></a></div>

现在你的脚本：

<script language="JavaScript" type="text/javascript">
<!--
function swapContent(obj,cv) {
    $(obj).parent().html('<div align="center"><img src="images/loader.gif"/></div>').show();
    var url = "process.php";
    $.post(url, {contentVar: cv} ,function(data) {
       $(obj).parent().html(data).show();
    });
}
//-->
</script>

this实际上会传递调用该方法的DOM元素。然后在你的脚本中使用这个元素。

修改

我错过anchor标记位于div内。将脚本更改为使用parent。

Answer 3

不要将onclick和onmousedown处理程序内联。我建议您使用（html5）data-属性来存储您当前放在cv参数中的值：

<div id="div1" align="center"><a href="#" data-cv="do_stuff"><img src='images/icon.png' border='0'></a></div>
...
<div id="div2" align="center"><a href="#" data-cv="do_stuff"><img src='images/icon.png' border='0'></a></div>

...然后用jQuery绑定点击：

$("a[data-cv]").click(function() {
   var thediv = $(this).parent(),
       cv = $(this).attr("data-cv");

   thediv.html('<div align="center"><img src="images/loader.gif"/></div>');

   var url = "process.php";
   $.post(url, {contentVar: cv} ,function(data) {
      thediv.html(data);
   });

   return false;
});

此代码使用has attribute selector获取具有data-cv属性的所有锚元素，并将点击处理程序绑定到这些元素。在处理程序中，this将是单击的特定锚点，因此在标记中给出关联的div元素实际上是锚点的父级，您可以使用$(this).parent()来获取对正确div的引用（对于其他html结构，您可以使用其他DOM遍历方法，例如.prev()或.closest()等。）

点击处理程序末尾的return false;会停止默认的锚点击行为。

另请注意，对于您当前显示的代码，您不需要.show()方法，因为div已经显示。

Answer 4

在添加新div之前清除div的html：

$('#myDiv').html('');

使用jQuery更改动态创建的div内容

4 个答案: