javascript - 复制内容每次使用javascript更改时进入表单字段

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

我认为这是“发布和订阅”（“Pub/Sub”）方法的一个案例。

在本文中，我们学习了四种使用 jQuery 1.7 进行 Pub/Sub 的方法，我选择了选项 1，它利用了 jquery 1.7 的一个新特性，即它的 $.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);
    });
});

演示在这里

因此，使用正确的术语，用于更改徽标和更新表单字段的代码实际上是“解耦”的。

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