Question

我正在使用以下脚本根据输入的值更改图像。

var siteLogo = $('input#site-logo').val();
$('#site-logo, img').attr("src", siteLogo);

HTML

 <div id=site-logo>
<img src="default.png" width="285px" height="100px">
</div>

<input id="site-logo" class="input-xlarge" placeholder="http://" type="text">
<button id="add-site-logo" class="btn" href=""> Add</button>

我的问题是，它正在将页面上的图像全部更改为site-logo中的值。如何才能使 ONLY 更改site-logo中的值而不是页面上的其他随机内容？

Answer 1

尝试

var siteLogo = $('input#site-logo').val();
$('#site-logo img').attr("src", siteLogo);

Answer 2

这里有两个问题：

您为两个元素设置了id字段。它应该是独一无二的。
您使用的选择器会选择多项内容：#site-logo选择器会选择带有site-logo ID的项目，img会选择您网页上的所有图片。选择器中的逗号基本上定义了所有选择器中的“或”;如果匹配#site-logo 或匹配img，则会选择一个元素。

将您的选择器更改为：

$("#site-logo img").attr("src", siteLogo);

在这种情况下，您需要为<input>标记设置不同的ID。

Answer 3

从jQuery选择器

中删除'，'

$('#site-logo img').attr("src", siteLogo);

$('#site-logo img')表示#site-logo

中的所有图片

$('#site-logo, img')表示#site-logo加上所有图片。

Answer 4

请改为尝试：

$('img','#site-logo')

或更好：

$('#site-logo').find('img')

Jquery替换图像问题

4 个答案: