如何更改基础元素的“src”属性

Question

我有以下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应用于此。

Answer 1

您可以使用此选择器：

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

Answer 2

不确定。您可以使用jquery来选择子元素。这只是选择正确的过滤器的问题：

.logo.logo-desktop img

JQuery为selecting elements提供了很多选项。在这种情况下，您可以使用.logo>a>img或var myImage = $('.logo-desktop img'); if(myImage.length==0) { //length==0 means your selector returned 0 elements } ...这一切都取决于页面结构的复杂程度。

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

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

<nav class="navbar navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Never expand</a>
  <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="navbar-collapse collapse" id="navbarsExample01" style="">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu" aria-labelledby="dropdown01">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

希望这一切都有所帮助！