Question

我需要做的是将ID为#logo的div的内容复制到id为＃input_2_15的表单字段。

div中的内容是一个图像（<img src.../>），但这会改变...我有代码在页面加载时将内容复制到输入字段，但是我需要一个代码来复制每次图像更改时的内容（并且在不刷新页面的情况下执行此操作）。我怎么能这样做？

此外，是否可以使该功能仅复制图像名称，例如。 12345.png而不是整个<img src=..../>？

米罗

Answer 1

$('#logo').find('img').attr('src');

这将为您提供图像位置..现在只需将其附加到第二个div中的img src

Answer 2

你的意思是

function getUrl(id) {
  // function to return the source of an image inside an object with given ID
  return $("#"+id).find("img").attr("src");
}

$(document).ready(function() {
  var currentImage = getUrl("logo"); // get the url of the div now (empty I guess)

  $("#ajaxtrigger").click(function() { // some link with ID ajaxtrigger

    $("#logo").load("someurlreturningsomehmtl",function(){ // loads the image
      if (currentImage != getUrl("logo")) { // did it change?
        currentImage = getUrl("logo"); // save the name
        $("#input_2_15").val(currentImage); // update the field
      }
    })
  });
});

Answer 3

我将此视为“发布和订阅”（“发布/订阅”）方法的案例。

在this article中，我们学习了使用jQuery 1.7进行Pub / Sub的四种方法，并且我选择了利用jquery 1.7的新功能的选项1，即其$ .Callbacks功能。这篇文章给出了很好的理解，我不会在这里做得更好。

以下代码是选项1的略微修改版本，无需全局变量：

$.Topic = function(id) {
    var callbacks, topic = id && $.Topic.topics[id];
    if (!topic) {
        callbacks = $.Callbacks();
        topic = {
            publish: callbacks.fire,
            subscribe: callbacks.add,
            unsubscribe: callbacks.remove
        };
        if (id) {
            $.Topic.topics[id] = topic;
        }
    }
    return topic;
};
$.Topic.topics = {};//avoid global var by making `topics` a property of the static function `jQuery.Topic`.

$(function() {

     //A function to change the logo and fire a publisher. 
    function changeLogoSrc(src) {
        $("#logo img").attr('src', src);
        $.Topic('logoSrcChanged').publish(src); 
    }

    // A subscriber which listenes for the 'logoSrcChanged' publisher 
    // and responds by writing the src string to the required form field
    $.Topic('logoSrcChanged').subscribe(function(src) {
        $("#input_2_15").val(src);
    });
});

Demo here

因此，更改徽标和更新表单字段的代码，使用正确的术语，有效地“解耦”。

对于简单的事情，这种方法可以说是夸大其词，但在需要许多pub / subs的更广泛的环境中会很有用。

每次使用javascript </div>更改内容时，将<div>中的内容复制到表单字段中

3 个答案: