javascript - jquery 禁用上一个下一个按钮模态图像

Question

我需要在第一个 child 和最后一个 child 中更改按钮 css prev 和 next。

我正在考虑这段代码但没有成功:

$(document).ready(function() {
  //begin open modal
  var $thisImage;
  $('.container img').click(function() {
    $thisImage = $(this);
    var src = $thisImage.attr('src');
    $('.modal').css({
      display: "block"
    });
    $('.modal-content').attr("src", src);
  });
  //begin navigate modal
  function navprev() {
    if ($thisImage.prev().is('img')) {
      var prev = $thisImage.prev().attr('src');
      var first = $thisImage.first().attr('src');
      $thisImage = $thisImage.prev();
      $('.modal-content').attr("src", prev);
      if ($('.modal-content').attr("src", first)) {
        $('.prev').css("background", "red")
      }
    }
  }

  function navnext() {
    if ($thisImage.next().is('img')) {
      var next = $thisImage.next().attr('src');
      $thisImage = $thisImage.next();
      $('.modal-content').attr("src", next);
    }
  }
  //prev
  $('.prev').click(function() {
    navprev();
  });
  //next    
  $('.next').click(function() {
    navnext();
  });
  $('.close').click(function() {
    $('.modal').css({
      display: "none"
    });
  });
});

.container img {
  height: 250px;
  padding: 10px;
  width: 170px;
  object-fit: cover;
}
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}
.prev, .next {
  background: blue;
}
.modal-content {
  margin: auto;
  display: block;
  min-width: 300px;
  min-height: 500px;
  object-fit: cover;
}
/* The Close Button */
.close {
  position: absolute;
  top: 50px;
  right: 70px;
  color: #f1f1f1;
  font-size: 50px;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <img src="http://placekitten.com/200/300" alt="" />
  <img src="http://placekitten.com/200/287" alt="" />
  <img src="http://placekitten.com/200/285" alt="" />
  <img src="http://placekitten.com/200/286" alt="" />
  <!-- The Modal -->
  <div class="modal">
    <button class="prev">Prev</button>
    <button class="next">Next</button>
    <br>
    <span class="close">×</span>
    <img src="" class="modal-content" alt="">
  </div>
</div>

我的目标是:

1. 当我单击 prev 直到第一个元素时，它将更改按钮元素的 css 规则，以添加禁用效果。
2. 与prev相同，但它用于next按钮

fiddle here

Answer 1

您可以使用 disabled属性，让您赚取积分:

1. 按钮的样式会发生变化，并且看起来不可点击。
2. 按钮将不可点击。

注意:您可以使用 css 中的 button[disabled] 选择器根据需要设置禁用按钮的样式。

现在，代码:

$(document).ready(function() {
  //begin open modal
  var $thisImage;
  $('.container img').click(function() {
    $thisImage = $(this);
    var src = $thisImage.attr('src');
    $('.modal').css({
      display: "block"
    });

    initButtons();

    $('.modal-content').attr("src", src);
  });

  //begin navigate modal
  function navprev() {
    console.log($thisImage.prev());

    var prev = $thisImage.prev().attr('src');
    var first = $thisImage.first().attr('src');
    $thisImage = $thisImage.prev();
    $('.modal-content').attr("src", prev);
  }

  function navnext() {
    if ($thisImage.next().is('img')) {
      var next = $thisImage.next().attr('src');
      $thisImage = $thisImage.next();
      $('.modal-content').attr("src", next);
    }
  }

  function initButtons() {
    $('.next').prop('disabled', !$thisImage.next().is('img'))
    $('.prev').prop('disabled', !$thisImage.prev().is('img'))
  }

  //prev
  $('.prev').click(function() {
    navprev();
    initButtons();
  });
  //next    
  $('.next').click(function() {
    navnext();
    initButtons();
  });
  $('.close').click(function() {
    $('.modal').css({
      display: "none"
    });
  });
});

.container img {
  height: 250px;
  padding: 10px;
  width: 170px;
  object-fit: cover;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  margin: auto;
  display: block;
  min-width: 300px;
  min-height: 500px;
  object-fit: cover;
}

/* The Close Button */
.close {
  position: absolute;
  top: 50px;
  right: 70px;
  color: #f1f1f1;
  font-size: 50px;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <img src="http://placekitten.com/200/300" alt="" />
  <img src="http://placekitten.com/200/287" alt="" />
  <img src="http://placekitten.com/200/285" alt="" />
  <img src="http://placekitten.com/200/286" alt="" />
  <!-- The Modal -->
  <div class="modal">
    <button class="prev">Prev</button>
    <button class="next">Next</button>
    <br>
    <span class="close">×</span>
    <img src="" class="modal-content" alt="">
  </div>
</div>

http://jsbin.com/bezujo/edit?html,css,js