如何更改底层元素的“src”属性答案

【问题标题】：How to change the "src" attribute of an underlying element如何更改底层元素的“src”属性
【发布时间】：2018-10-05 21:57:49
【问题描述】：

我有以下 HTML (WordPress)

我将 ID 硬编码到其中
id="liva-logo

但这不是 WordPress 的最佳实践，因为每次主题更新我都会丢失一次。

如果在某些页面上时，我会使用一些 jQuery 来更改 img src。

jQuery(document).ready(function () {
    if(window.location.href.indexOf("livathome") > -1 || window.location.href.indexOf("eigendom") > -1) {
       jQuery("#liva-logo").attr("src","/uploads/Logo-livathome-retina.png");
    }
});

所以你可以看到我选择了#liva-logo

我想知道是否可以选择上层 div 类 "logo-desktop" 并将我的 jQuery 应用到它。

【问题讨论】：

标签： jquery wordpress css-selectors

【解决方案1】：

当然。您可以使用 jquery 来选择子元素。只需选择正确的过滤器即可：

$(document).ready(function() {
    if([your if clause]) {
       jQuery(".logo-desktop img").attr("src","yournewsource.jpg");
    }
}

JQuery 有很多selecting elements 的选项。在这种情况下，您可以使用.logo.logo-desktop img 或.logo>a>img ...这完全取决于页面结构的复杂程度。

一般来说，我们大多数人使用 css 类（“.”选择器）和元素类型（例如 - “img”、“a”、“div”等）的组合来选择正确的元素.

您还可以检查您在 javascript 中获得的结果的长度，以查看您使用的选择器是否实际返回任何内容：

var myImage = $('.logo-desktop img');
if(myImage.length==0) { 
    //length==0 means your selector returned 0 elements
}

希望对您有所帮助！

【讨论】：

就这么简单，我应该知道的。我猜是 Tunnelvision！

【解决方案2】：

你可以使用这个选择器：

jQuery(".logo.logo-desktop > a > img").attr(      [...]

【讨论】：

谢谢！非常快速的反应！很简单，猜我有隧道视觉；还在学习！