Question

我的代码看起来像这样。如果textbox的值为空，则显示图像abc.png 如果文本框的值是某个值，则显示其他图像xyz.png

<td class= 'notesClass' id='selectoneN'>
    <a href='#'>
        <img class='notesImg' id='notesID' src='images/notes.png'/>
        <input class='hiddenClass'  value="+Col7+"></input>
    </a>
</td>

我用$('table tr td img').attr("src", "images/xyz.png"); 但问题是它用xyz.png替换了所有img，这不是我想要的。

Answer 1

试试这个

$("#id_of_image")[0].src = "images/xyz.png";

Answer 2

因此，使用$('#notesID').attr("src", "images/xyz.png");仅img

来定位id {}

#notesID实际上是在告诉jquery你想要通过它的ID来定位元素（#这样做，其中.将定位一个css类） - 以及实际的ID notesID

您的选择器 - $('table tr td img') - 正在定位表格行中单元格中的所有图片。

Answer 3

使用id来解决

$('#notesID').attr(...)

如果图像是兑现的，则将时间作为参数发送

var now = new Date();
$('#notesID').attr('src', 'path/to/image?'+now);

Answer 4

请注意您的选择器：

$('table tr td img')

这将定位任何表中的任何 img。因此，如果不止一个，那么您将逻辑应用于所有这些逻辑。但是，请注意您的标记：

<img class='notesImg' id='notesID' ...

您的元素有id。 id必须是唯一的，因此假设您没有违反该规则，您可以轻松定位该元素：

$('#notesID')

另一方面，如果你打破了这条规则，那就停止吧。但更重要的是，这意味着您没有针对您所定位的元素的唯一标识符。所以，从逻辑上讲（不是在代码方面，而只是在文档结构方面），你将如何识别那个元素？

例如，调用它的JavaScript代码是什么？它是否响应事件处理程序？该事件处理程序是否附加到input元素？是否this引用了input元素？如果是这样，您可以通过两种方式识别其邻近的img。这可能有效：

$(this).prev('img')

或者类似的东西：

$(this).parent().find('img')

基本上它是从已知的起点（input）遍历DOM以找到附近的img。您可以在DOM中向后或向前移动，也可以向上移动到共同父级并向后移动。它是一个基本的层次结构，可以是navigated by jQuery。一旦你可以在逻辑上确定如何决定选择哪个元素，只需使用jQuery选择器（或它们的组合）来表达该逻辑。

如何使用jQuery基于输入值更改图像的src

4 个答案: