javascript - 如何使用 JQuery 的 else/if 语句更改图像 src？

Question

HTML:非常简单，只需滑动带有更改图像的按钮即可。

<img src="https://i.ytimg.com/vi/QJg2z3rRgSE/maxresdefault.jpg" id="myslides">
<ul id="mylist">
  <li><button class="btns" id="btn1">Previous</button></li>
  <li><button class="btns" id="btn2">Next</button></li>
</ul>

CSS:我在这里不需要帮助，我不太喜欢设计。

#myslides {
  height: 100%;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

#mylist,
li {
  display: inline-block;
  position: relative;
  top: -5px;
  left: -20px
}

.btns {
  height: 50px;
  width: 200px;
  background: #666666;
  color: white;
  font-size: 20px;
}

JQuery:我不知道我在这里做错了什么。 “图像”不能未定义，因为它不是“img”，那么为什么 src 更改不起作用？

$(docuent).ready(function() {
  var slide = $("#myslides");
  $("#btn2").click(function() {
    if (slide.attr("src") == "https://i.ytimg.com/vi/QJg2z3rRgSE/maxresdefault.jpg") {
      slide.attr("src", "https://techgage.com/wp-content/uploads/2015/11/The-Witcher-3-Wild-Hunt-at-3440x1440-Resolution.jpg");
    }
  });
});

$(docuent).ready(function() {
  var slide = $("#myslides");
  $("#btn2").click(function() {
    if (slide.attr("src") == "https://i.ytimg.com/vi/QJg2z3rRgSE/maxresdefault.jpg") {
      slide.attr("src", "https://techgage.com/wp-content/uploads/2015/11/The-Witcher-3-Wild-Hunt-at-3440x1440-Resolution.jpg");
    }
  });
});

#myslides {
  height: 100%;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

#mylist,
li {
  display: inline-block;
  position: relative;
  top: -5px;
  left: -20px
}

.btns {
  height: 50px;
  width: 200px;
  background: #666666;
  color: white;
  font-size: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://i.ytimg.com/vi/QJg2z3rRgSE/maxresdefault.jpg" id="myslides">
<ul id="mylist">
  <li><button class="btns" id="btn1">Previous</button></li>
  <li><button class="btns" id="btn2">Next</button></li>
</ul>

Answer 1

您拼错了 document。如果您正在寻找一种更具可扩展性的方法来制作 slider ，您可以尝试这样的方法:

$(document).ready(function () {
  var visibleSlide = $("#myslides");
  var slideList = [
    "https://i.ytimg.com/vi/QJg2z3rRgSE/maxresdefault.jpg",
    "https://techgage.com/wp-content/uploads/2015/11/The-Witcher-3-Wild-Hunt-at-3440x1440-Resolution.jpg"
  ];
  var currentSlideIndex = 0;

  $("#btn1").click(function () {
    changeSlide('previous');
  });

  $("#btn2").click(function () {
    changeSlide('next');
  });

  function changeSlide(direction) {
    switch(direction) {
      case 'previous':
        if (currentSlideIndex > 0) {
          currentSlideIndex--;          
        }

        break;

      case 'next':
        if (currentSlideIndex < slideList.length - 1) {
          currentSlideIndex++;
        }

        break;

      default:
        // no-op
    }

    visibleSlide.attr('src', slideList[currentSlideIndex]);
  }

});

参见 CodePen .

如果您没有在页面上加载 jQuery，我已将其添加到您的 HTML 底部:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>