jquery disable prev next按钮模态图像

Question

我需要在第一个孩子和最后一个孩子时更改按钮css prev和next。

我在考虑这段代码，但没有成功：

＆＃13;

＆＃13;

$(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"
    });
  });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我的目标是：

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

小提琴here

Answer 1

我修复了上一个按钮，我认为你现在可以做下一个按钮;）

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

    $('.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);
    $('.prev').css("background", "blue");
    if ($thisImage.prev().is('img')) {
        $('.prev').css("background", "blue")
    } else {
      $('.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"
    });
  });
});

https://jsfiddle.net/hc05jsqe/

Answer 2

您可以使用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