如果不满足条件，则单击时跳过元素

Question

我目前有滑块功能 - 滑块功能有一个名为 comesoon（）的功能。这决定了图像是否可用，如果不可用，则会放置默认图像。

现在，当默认图像到位时，单击选项已禁用，因此您无法单击缩略图并加载图像。

问题：使用下一个和上一个点击功能时，不会跳过图片。如果图像不再可用，跳过项目的最佳方法是什么。

$('#product-gallery-super').children().click(function(e) {
  e.preventDefault();

  var prodImg = $(this).attr('data-image');
  var imgSrc = $(this).children().attr('src')

  if (imgSrc != 'http://yi.yoga/images/cs.jpg') {

    $(this).addClass("active-thumbnail").siblings().removeClass("active-thumbnail");

    $('.main-image').attr('src', prodImg);

  }
  // to get img anchor index
  var checkforindex = $(this).index() + 1;
  // get image anchor length
  var imglength = $('#product-gallery-super > a').length;
  if (checkforindex > 1 && checkforindex < imglength) {
    $('#prev, #next').removeClass('disabled');
  } else if (checkforindex == 1) {
    $('#next').removeClass('disabled');
    $('#prev').addClass('disabled');
  } else if (checkforindex == imglength) {
    $('#prev').removeClass('disabled');
    $('#next').addClass('disabled');
  }

});

$("#prev").click(function() {
  if ($("#product-gallery-super .active-thumbnail").prev().length != 0) {
    $("#product-gallery-super .active-thumbnail").prev().addClass('active-thumbnail').next().removeClass('active-thumbnail');

    $('.main-image').attr('src', $('#product-gallery-super').find('.active-thumbnail').data('image'));

  }
  // to get img anchor index
  var checkforindex = $('.product-zoom-gallery.active-thumbnail').index() + 1;
  // get image anchor length
  var imglength = $('#product-gallery-super > a').length;
  if (checkforindex == 1) {
    $(this).addClass('disabled');
  } else if (checkforindex < imglength) {
    $("#next").removeClass('disabled');
  }
  return false;
});

$("#next").click(function() {
  if ($("#product-gallery-super .active-thumbnail").next().length != 0) {
    $("#product-gallery-super .active-thumbnail").next().addClass('active-thumbnail').prev().removeClass('active-thumbnail');

    $('.main-image').attr('src', $('#product-gallery-super').find('.active-thumbnail').data('image'));

  }
  // to get img anchor index
  var checkforindex = $('.product-zoom-gallery.active-thumbnail').index() + 1;
  // get image anchor length
  var imglength = $('#product-gallery-super > a').length;
  if (checkforindex > 1) {
    $("#prev").removeClass('disabled');
  }
  if (checkforindex == imglength) {
    $(this).addClass('disabled');
  }
  return false;
});

.active-thumbnail {
  display: inline-block;
  border: 1px solid black;
}
#prev {
  opacity: 1;
}
#next {
  opacity: 1;
}
.disabled {
  opacity: 0.5 !important;
}
#product-gallery-super img {
  width: 61px;
  height: 79px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

<img class="main-image image-resize" src="http://placehold.it/300x400?text=1" data-zoom-image="http://placehold.it/1000x2000?text=1" onerror="comingSoonMain(this)">

<button name="prev" id="prev" class="disabled">Prev</button>
<button name="next" id="next">Next</button>

<div id="product-gallery-super">
  <a href="#" class="product-zoom-gallery active-thumbnail" data-image="http://placehold.it/300x400?text=1">
    <img src="http://placehold.it/61x79?text=1">
  </a>
  <a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=2">
    <img src="http://yi.yoga/images/cs.jpg">
  </a>
  <a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=3">
    <img src="http://placehold.it/61x79?text=3">
  </a>
  <a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=4">
    <img src="http://placehold.it/61x79?text=4">
  </a>
  <a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=5">
    <img src="http://placehold.it/61x79?text=5">
  </a>
  <a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=6">
    <img src="http://placehold.it/61x79?text=6">
  </a>

</div>

Answer 1

首先，我建议您为“即将推出”的图片添加一个类，以便更容易找到：

<a href="#" class="product-zoom-gallery comingSoon" data-image="http://placehold.it/300x400?text=2">
    <img src="http://yi.yoga/images/cs.jpg">
</a>

然后，您必须调整选择器以跳过具有类comingSoon的标记。我重写了那一部分，删除了一些正在发生的重复。我还在适当时将disabled属性添加到Next / Previous按钮，因此当它们不应该时它们是不可点击的。

这是我的版本：

$(document).ready(function() {
    enableDisableButtons();

    $('#product-gallery-super').children().click(function (e) {
        e.preventDefault();

        var prodImg = $(this).attr('data-image');
        var imgSrc = $(this).children().attr('src')

        if (imgSrc != 'http://yi.yoga/images/cs.jpg') {
            $(this).addClass("active-thumbnail").siblings().removeClass("active-thumbnail");
            $('.main-image').attr('src', prodImg);
        }

        enableDisableButtons();
    });

    $("#prev").click(function () {
        navigate("prev");
        return false;
    });

    $("#next").click(function () {
        navigate("next");
        return false;
    });
});

function navigate(direction) {
    $current = $("#product-gallery-super .active-thumbnail");
    $nextPrevious = findNextPreviousActive(direction);

    $current.removeClass('active-thumbnail');
    $nextPrevious.addClass('active-thumbnail');
    $('.main-image').attr('src', $nextPrevious.data('image'));

    enableDisableButtons();
}

function findNextPreviousActive(direction) {
    if (direction == "next") {
        $previousNext = $("#product-gallery-super .active-thumbnail").nextAll().not(".comingSoon").first();
    } else {
        $previousNext = $("#product-gallery-super .active-thumbnail").prevAll().not(".comingSoon").first();
    }
    return $previousNext;
}

function enableDisableButtons() {
    if (findNextPreviousActive("next").length == 0) {
        $("#next").addClass("disabled").prop("disabled", true);
    } else {
        $("#next").removeClass("disabled").removeProp("disabled");
    }
    if (findNextPreviousActive("prev").length == 0) {
        $("#prev").addClass("disabled").prop("disabled", true);
    } else {
        $("#prev").removeClass("disabled").removeProp("disabled");
    }
}

.active-thumbnail {
    display: inline-block;
    border: 1px solid black;
}
#prev {
    opacity: 1;
}
#next {
    opacity: 1;
}
.disabled {
    opacity: 0.5 !important;
}
#product-gallery-super img {
    width: 61px;
    height: 79px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

<img class="main-image image-resize" src="http://placehold.it/300x400?text=1" 
    data-zoom-image="http://placehold.it/1000x2000?text=1" onerror="comingSoonMain(this)">

<button name="prev" id="prev">Prev</button>
<button name="next" id="next">Next</button>

<div id="product-gallery-super">
  <a href="#" class="product-zoom-gallery active-thumbnail" data-image="http://placehold.it/300x400?text=1">
    <img src="http://placehold.it/61x79?text=1">
  </a>
  <a href="#" class="product-zoom-gallery comingSoon" data-image="http://placehold.it/300x400?text=2">
    <img src="http://yi.yoga/images/cs.jpg">
  </a>
  <a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=3">
    <img src="http://placehold.it/61x79?text=3">
  </a>
  <a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=4">
    <img src="http://placehold.it/61x79?text=4">
  </a>
  <a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=5">
    <img src="http://placehold.it/61x79?text=5">
  </a>
  <a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=6">
    <img src="http://placehold.it/61x79?text=6">
  </a>

</div>