jquery - 如果我更改其在代码中的位置，该链接将不起作用

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>