Question

我需要jQuery中的parent（）帮助。

我有一个图像列表，每个图像后跟一个表单，用户可以在其中执行某些操作，例如更改图像的描述等。

<div id='items_list' class='items_list' >               
<div id='item_209' class='item_details' >   
<form action='actions_dispatch2.php' method='post' name='update_image_details' class='form'>
    <input name='originator' type='hidden' value='/list_images3.php' />
    <input name='album_id' type='hidden' value='27' />
    <input name='image_id' type='hidden' value='209' />
    <input name='is_gallery' type='hidden' value='N' />
    <input name='language' type='hidden' value='1' />

<div class='item_img'>
    <img src=' images/square_thumbnails_75x75/209.jpg'/>        
</div> <!-- end div item_img -->

<div class='item_description'>
    <h3> title </h3>
    <h4> some description...</h4>  
</div> <!-- end div item_description -->

<div class='item_buttons' parameters='&album_id=27&image_id=209&is_gallery=N&language=1&originator=/list_images3.php'>
    <a href='/actions_dispatch2.php' action='modify_image' title='Modify' rel='#overlay'>
     <input name='modify_image' type='submit' value='modify' class='button' />
    </a>
</div> <!-- end div item_buttons -->
</form>

</div> <!-- end div item_details (for content to modify)-->     

<div id='item_208' class='item_details' >
<!-- ...and it keeps going with another image... -->

我还有一个jQuery函数，应该检索一些参数传递给action_dispatch2.php：

$(function() { 

    // if the function argument is given to overlay, 
    // it is assumed to be the onBeforeLoad event listener 
    $("a[rel]").overlay({ 

    onBeforeLoad: function() { 

    // grab wrapper element inside content 
    var wrap = this.getContent().find(".contentWrap"); 

    // get page to load and action from href attribute in link
    var page_to_load = this.getTrigger().attr("href"); 
    var action = this.getTrigger().attr("action");

    //get parameters from field parameters in parent div (item_buttons)
    var parameters = this.getTrigger().parent().attr("parameters");

    // load the page specified in the trigger 
    wrap.load(page_to_load + "?action=" + action + parameters);

    } 

    }); 
    });

我能够检索href和action属性，但无法检索parent（）div中的参数。变量参数变为'undefined' 奇怪的是，我有另一个页面，非常相似（一个显示专辑列表），我可以在那里检索该参数确定！

我不知道问题是什么！你能为我指出正确的方向吗？我安装了firebug，但如果可能的话，不知道如何使用它来跟踪该变量..

感谢，帕特里克

Answer 1

您需要$(this)而不是this。 this将是元素，因此为了调用jQuery函数，它需要通过传入$()

包装在jQuery对象中

$(function() { 

        // if the function argument is given to overlay, 
        // it is assumed to be the onBeforeLoad event listener 
        $("a[rel]").overlay({ 

        onBeforeLoad: function() { 

        // grab wrapper element inside content 

        // store jQuery object in local variable
        var $this = $(this);

        // I would advise using the element tag here
        // instead of just the class as it will be faster 
        // across all browsers
        var wrap = $this.getContent().find(".contentWrap"); 

        // get page to load and action from href attribute in link
        var page_to_load = $this.getTrigger().attr("href"); 
        var action = $this.getTrigger().attr("action");

        //get parameters from field parameters in parent div (item_buttons)
        var parameters = $this.getTrigger().parent().attr("parameters");

        // load the page specified in the trigger 
        wrap.load(page_to_load + "?action=" + action + parameters);

        } 

        }); 
});

Answer 2

我扩展了示例以创建测试，并且... parameters保持正确的值。什么不起作用是将参数传递给actions_dispatch2.php。尝试将参数作为第二个参数传递给load(...)：

    wrap.load(page_to_load, "action=" + action + parameters);

编辑：罢工，它在Safari 4.0.3和FF 3.5下的测试用例中都有两种方式。这值得一试，但可能不是解决方案。

我们需要一个完整的最小测试用例，因为提供的内容将起作用。

另一种方法是取消“参数”属性，这是表格输入中非标准和不必要的数据重复。使用收集参数的方法扩展jQuery：

jQuery.extend(jQuery.fn, {parameters:
  function(type) {
    type = type || '';
    var params = this.children('input'+type).map(function (i) {
        if (this.value) {
          return this.name + '=' + this.value;
        } else {
          return this.name;
        }
      }
    );
    return Array.prototype.join.call(params, '&');
  }
});

然后，在你的onBeforeLoad处理程序中：

var parameters = '&' + this.getTrigger().closest('form').parameters(':hidden');

您可能会遗漏'：hidden'参数。如果您愿意，可以改变parameters以另外采用多种类型（例如选择器数组）来从多种输入类型中获取参数。

至于Firebug指针，请参阅：

jQuery父（）

2 个答案: