WordPress 元框输入字段上的 jquery

Question

我的 WordPress 主题中有一堆元框。单击带有 class="meta_upload_button" 的按钮时，我想启动默认媒体上传器。感谢一些在线教程，我已经使该部分大部分工作了。我正在尝试调整代码以适用于多个输入/按钮对。

<input type="text" />
<button type="button" class="meta_upload_button">Upload</button>

id、名称和值均由 WPAlchemy MetaBox 类动态生成。

问题是，无论我单击哪个按钮，我的代码都会更改最后一个文本输入字段的值，这让我认为这是一个 jquery 选择问题。但是，我使用了我奇特的颜色调试方法，并将边框颜色应用于单击按钮之前的输入框。效果很好。但在 send_to_editor 函数中，相同的声明没有选择正确的输入。

var ww = $('#post_id_reference').text();

$('.meta_upload_button').each(function() {

 var button = $(this);

 $(this).click(function() {

  //test- result= changes border color on correct input
        button.prev('input').css("border","3px solid red");


  window.send_to_editor=window.send_to_editor_clone;
  tb_show('', 'media-upload.php?post_id=' + ww + '&type=image&TB_iframe=true');
  return false;
 });

  //my version of the send_to_editor
 window.send_to_editor_clone = function(html){
        //grabs the URL of the selected image
  imgurl = $('img',html).attr('src');

  forminput = button.prev('input');

        //changes the value on the LAST input 
  forminput.val(imgurl);
  tb_remove();
 }

}); //end each

Answer 1

好吧，我想我明白问题所在了。

$('.meta_upload_button').each

为每个按钮运行一次函数主体。每次运行时，变量

window.send_to_editor_clone

都会被设置为某个应该填充文本字段的函数。但是，只有一个
window，因此window.send_to_editor将等于最后分配的值。在本例中，它是 button 具有其将具有的最后一个值的函数 - 即，它是最后一个按钮，这就是您所描述的行为。

你如何解决它？我不太确定。您是否只能通过 window.send_to_editor(html) 访问此内容？理想情况下，您只需定义该函数一次，但将特定按钮作为参数传递给它。

谷歌搜索 send_to_editor 并没有告诉我如何处理这个问题。您可以按如下方式执行此操作：

var ww = $('#post_id_reference').text();

var which_button;

$('.meta_upload_button').each(function() {

 var button = $(this);

 $(this).click(function() {
   which_button = button;    


  tb_show('', 'media-upload.php?post_id=' + ww + '&type=image&TB_iframe=true');
  return false;
 });
}); //end each

//my version of the send_to_editor
window.send_to_editor_clone = function(html){
  //grabs the URL of the selected image
  imgurl = $('img',html).attr('src');

  forminput = which_button.prev('input');

  //changes the value on the LAST input 
  forminput.val(imgurl);
  tb_remove();
}
window.send_to_editor=window.send_to_editor_clone;    

仅当在点击处理程序之后调用 window.send_to_editor 时，此操作才有效。不然处理起来会更麻烦。我认为使用 setTimeOut 是可能的，但到那时它就变成了并发的事情，这是更难考虑的。

Answer 2

@forefinger - 非常感谢你！我对每个的使用的问题现在是有意义的，我永远不会看到这一点。我也发誓我尝试过类似于which_button的东西，但我今天醒来，看到了你的答案——而且它成功了！

var ww = $('input[name=post_ID]').val();

$('.meta_upload_button').each(function() {

    var button = $(this);

    $(this).click(function() {
        which_button = button;
        window.send_to_editor=window.send_to_editor_clone;
        tb_show('', 'media-upload.php?post_id=' + ww + '&type=image&TB_iframe=true');
        return false;
    });


    window.send_to_editor_clone = function(html){
        imgurl = $('img',html).attr('src');
        forminput = which_button.prev('input');
        forminput.val(imgurl);

        tb_remove();
    }

}); //end each

send_to_editor 是另一个几乎没有任何文档的 WordPress 函数。但上面，我需要将克隆的 send_to_editor 保留在单击函数中，以便仅在单击元框中的按钮时调用它，并且不会干扰常规帖子上的媒体按钮。