0

我在这里变得非常沮丧。

我有一张记录表。每条记录旁边都有一个按钮。单击该记录旁边的按钮时，应执行 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”的内容被更改为对 process.php 的 ajax 调用的输出。这一切都很好，但是我将拥有几十个这样的 div，并且我需要能够调用 swapContent 函数，不仅可以使用参数 cv，还需要传入一个参数，该 div 应该更改其内容。

我相信我的错误只是基于对 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>
4

4 回答 4

3

当您将 div 的 id 传递给函数时，代替$(thediv)-> $("#"+thediv)将起作用

于 2012-05-14T06:09:52.670 回答
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.

于 2012-05-14T06:16:05.557 回答
1

不要将onclickandonmousedown处理程序内联。我建议您使用 (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 属性选择器获取所有具有属性的锚元素data-cv并将点击处理程序绑定到这些元素。在处理程序中，this将是单击的特定锚点，因此在您的标记中给出关联的 div 元素实际上是锚点的父元素，您可以使用它$(this).parent()来获取对正确 div 的引用（对于其他 html 结构，您可以使用其他 DOM 遍历.prev()、 或.closest()等方法）。

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

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

于 2012-05-14T06:29:28.860 回答
-1

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

$('#myDiv').html('');
于 2012-05-14T06:08:14.430 回答