如果我在代码中更改其位置，则链接不起作用

Question

发生了一些奇怪的事情，我无法弄清楚问题可能是什么。

var imageSliding = $('.box > .img');

//Lighbox & back shadow

$('.lightbox').click(function() {
  $('.backdrop, .box').animate({
    'opacity': '.50'
  }, 300, 'linear');
  $('.box').animate({
    'opacity': '1.00'
  }, 300, 'linear');
  $('.backdrop, .box').css('display', 'block');
});

$('.close').click(function() {
  close_box();
});

$('.backdrop').click(function() {
  close_box();
});

function close_box() {
  $('.backdrop, .box').animate({
    'opacity': '0'
  }, 300, 'linear', function() {
    $('.backdrop, .box').css('display', 'none');
  });
}

/* Slider */
var speed = 100;

$(".prev").click(function() {
  var now = $(this).parent().next("ul.gallery").children(":visible"),
    last = $(this).parent().next("ul.gallery").children(":last"),
    prev = now.prev();
  prev = prev.index() == -1 ? last : prev;
  now.fadeOut(speed, function() {
    prev.fadeIn(speed);
  });
});

$(".next").click(function() {
  var now = $(this).parent().next("ul.gallery").children(':visible'),
    first = $(this).parent().next("ul.gallery").children(':first'),
    next = now.next();
  next = next.index() == -1 ? first : next;
  now.fadeOut(speed, function() {
    next.fadeIn(speed);
  });
});

$(".gallery li").click(function() {
  var first = $(this).parent().children(':first'),
    next = $(this).next();
  next = next.index() == -1 ? first : next;
  $(this).fadeOut(speed, function() {
    next.fadeIn(speed);
  });
});

body {
  font-family: Helvetica, Arial;
}

.backdrop {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .0;
  filter: alpha(opacity=0);
  z-index: 50;
  display: none;
}

.box {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  background: white;
  text-align: left;
  z-index: 51;
  padding: 0;
  margin: 0;
  display: none;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 5px #444444;
  -webkit-box-shadow: 0px 0px 5px #444444;
  box-shadow: 0px 0px 5px #444444;
  border: 10px solid #fff;
  width: 40%;
}

@media (min-width: 320px) and (max-width: 900px) {
  .box {
    width: 98%;
  }
}

@media (min-width: 901px) and (max-width: 1200px) {
  .box {
    width: 60%;
  }
}

@media (min-width: 1201px) {
  .box {
    width: 48%;
  }
}

.box img {
  width: 100%;
}

.caption {
  padding-top: 10px;
  font-size: 15px;
}

.prev,
.next {
  position: relative;
  padding: 3px;
  cursor: pointer;
  float: right;
  border: 1px solid black;
}

.prev:active,
.next:active {
  background-color: black;
  color: white;
}

.gallery li {
  display: none;
  list-style: none;
  margin-left: -40px;
}

.gallery li:first-child {
  display: block;
}

.gallery img {
  max-height: 550px;
}

.slideButtons {
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <h1>Welcome Within</h1>
  <a href="#" class="lightbox">Open Lightbox</a>
  <div class="backdrop"></div>
  <div class="box">
    <ul class="gallery" id="olympGallery">
      <li><img src="http://urbanphenomena.net/imgs/trabzoni/trabzoni1.png" alt="" title="" /></li>
      <li><img src="http://urbanphenomena.net/imgs/trabzoni/trabzoni2.png" alt="" title="" /></li>
      <li><img src="http://urbanphenomena.net/imgs/trabzoni/trabzoni3.png" alt="" /></li>
    </ul>

    <div class="slideButtons">
      <span class="next">Next</span>
      <span class="prev">Previous</span>
    </div>
    <div class="caption">
      <p>This thing is called 'Caption'. Let me tell you:</p>
      <hr />
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
</div>

你看到这个类“sliderButtons”？ 是的，当它在ul的底部时它不起作用，并且当我把它放在ul的顶部时，它起作用..对我来说很奇怪。

我希望按钮位于底部，我尝试将范围更改为<a>或<button>但不使用。

Answer 1

由于您使用的是.next()，其目标是跟随兄弟，因此当您将slideButtons放在UL元素

之前时，它会起作用

您应该使用.closest()遍历.box，然后使用.find()定位所需的元素;

var gallery = $(this).closest('.box').find("ul.gallery"),
    now = gallery.children(":visible"),
    last = gallery.children(":last"),

var imageSliding = $('.box > .img');
$('.lightbox').click(function() {
  $('.backdrop, .box').animate({
    'opacity': '.50'
  }, 300, 'linear');
  $('.box').animate({
    'opacity': '1.00'
  }, 300, 'linear');
  $('.backdrop, .box').css('display', 'block');
});

$('.close').click(function() {
  close_box();
});

$('.backdrop').click(function() {
  close_box();
});

function close_box() {
  $('.backdrop, .box').animate({
    'opacity': '0'
  }, 300, 'linear', function() {
    $('.backdrop, .box').css('display', 'none');
  });
}

/* Slider */
var speed = 100;

$(".prev").click(function() {
  var gallery = $(this).closest('.box').find("ul.gallery"),
    now = gallery.children(":visible"),
    last = gallery.children(":last"),
    prev = now.prev();
  prev = prev.index() == -1 ? last : prev;
  now.fadeOut(speed, function() {
    prev.fadeIn(speed);
  });
});

$(".next").click(function() {
  var gallery = $(this).closest('.box').find("ul.gallery"),
    now = gallery.children(":visible"),
    last = gallery.children(":last"),
    next = now.next();
  next = next.index() == -1 ? first : next;
  now.fadeOut(speed, function() {
    next.fadeIn(speed);
  });
});

$(".gallery li").click(function() {
  var first = $(this).parent().children(':first'),
    next = $(this).next();
  next = next.index() == -1 ? first : next;
  $(this).fadeOut(speed, function() {
    next.fadeIn(speed);
  });
});

body {
  font-family: Helvetica, Arial;
}

.backdrop {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .0;
  filter: alpha(opacity=0);
  z-index: 50;
  display: none;
}

.box {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  background: white;
  text-align: left;
  z-index: 51;
  padding: 0;
  margin: 0;
  display: none;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 5px #444444;
  -webkit-box-shadow: 0px 0px 5px #444444;
  box-shadow: 0px 0px 5px #444444;
  border: 10px solid #fff;
  width: 40%;
}

@media (min-width: 320px) and (max-width: 900px) {
  .box {
    width: 98%;
  }
}

@media (min-width: 901px) and (max-width: 1200px) {
  .box {
    width: 60%;
  }
}

@media (min-width: 1201px) {
  .box {
    width: 48%;
  }
}

.box img {
  width: 100%;
}

.caption {
  padding-top: 10px;
  font-size: 15px;
}

.prev,
.next {
  position: relative;
  padding: 3px;
  cursor: pointer;
  float: right;
  border: 1px solid black;
}

.prev:active,
.next:active {
  background-color: black;
  color: white;
}

.gallery li {
  display: none;
  list-style: none;
  margin-left: -40px;
}

.gallery li:first-child {
  display: block;
}

.gallery img {
  max-height: 550px;
}

.slideButtons {
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <h1>Welcome Within</h1>
  <a href="#" class="lightbox">Open Lightbox</a>
  <div class="backdrop"></div>
  <div class="box">
    <ul class="gallery" id="olympGallery">
      <li><img src="http://urbanphenomena.net/imgs/trabzoni/trabzoni1.png" alt="" title="" /></li>
      <li><img src="http://urbanphenomena.net/imgs/trabzoni/trabzoni2.png" alt="" title="" /></li>
      <li><img src="http://urbanphenomena.net/imgs/trabzoni/trabzoni3.png" alt="" /></li>
    </ul>

    <div class="slideButtons">
      <span class="next">Next</span>
      <span class="prev">Previous</span>
    </div>
    <div class="caption">
      <p>This thing is called 'Caption'. Let me tell you:</p>
      <hr />
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
</div>