Question

我正在尝试从url中获取参数值，将其添加到div中，然后在img src属性中克隆该值。

我可以在div内获取参数值，也可以将其克隆，但是它是这样做的：

<img id="target" src="images/">samplevalue.png</img>

我需要这样做：

<img id="target" src="images/samplevalue.png" />

样本参数：param1=samplevalue.png

代码如下：

html

<div id="block1"></div>
<img id="target" src=""/>

jQuery / Javascript

function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
            return decodeURIComponent(pair[1].replace(/\+/g, "&nbsp"));
        }
    }
    return decodeURIComponent(pair[1]);
}

document.getElementById("block1").innerHTML = 
getQueryVariable("param1");

$(document).ready(function() {
    $("img#target").attr("src", "images/").html($("#block1").html());
});

即使直接在img src属性内添加参数值也比在div内部先添加参数值还好。

在此方面的任何帮助都将受到高度赞赏。预先非常感谢。

Answer 1

您应该这样做：

$(document).ready(function() {
    var param1 = getQueryVariable("param1");
    $("img#target").attr("src", "images/"+param1);
    $("#block1").html(param1);  
});

将参数放入变量中，然后使用它来更改SRC属性并将内容放入div中。

Answer 2

您必须将函数返回的值添加为属性src的一部分。

在图像元素上使用.html($("#block1").html())，您试图在实际上无效的图像上设置html：

将功能更改为：

$(document).ready(function() {
  var urlPart = getQueryVariable();
  $("img#target").attr("src", "images/" + urlPart);
});

请注意：

由于您已经在使用jQuery，所以我建议您不要将JavaScript和jQuery混合使用，例如：

document.getElementById("block1").innerHTML = getQueryVariable("param1");

很容易写：

$('#block1').text(getQueryVariable("param1")); //text() is preferred when dealing with text content

Answer 3

$("img#target").attr("src", "images/"+$("#block1").html());

如何克隆img src属性中的url参数值？

3 个答案: