Если заявление для следующей кнопки в модальном bootstrap - PullRequest
Новая
       15

Если заявление для следующей кнопки в модальном bootstrap

1 голос
/ 21 февраля 2020

У меня возникла быстрая проблема, я не знаю, какое условие дать для if на моей странице, что гарантирует, что модальное содержимое при нажатии на следующую будет переходить от последнего к первому, когда оно достигает конца. 

$("#next-btn").on("click", function() {
  if (currentMarineKnotIndex - 1 == 0) {
    currentMarineKnotIndex = receivedArray.length - 1;
  } else {
    currentMarineKnotIndex++;
  }
  $("#marine-knot-div").html(receivedArray[currentMarineKnotIndex].nameLV + "<br>" + receivedArray[currentMarineKnotIndex].descriptionLV);
  $("#modal-header-div").css("background", "url('../Images/uploads/" + receivedArray[currentMarineKnotIndex].Image + "')");
});

$("#prev-btn").on("click", function() {
  if (currentMarineKnotIndex + 1 == 0) {
    currentMarineKnotIndex = receivedArray.length - 1;
  } else {
    currentMarineKnotIndex--;
  }
  $("#marine-knot-div").html(receivedArray[currentMarineKnotIndex].nameLV + "<br>" + receivedArray[currentMarineKnotIndex].descriptionLV);
  $("#modal-header-div").css("background", "url('../Images/uploads/" + receivedArray[currentMarineKnotIndex].Image + "')");
});

Я сделал так, чтобы она работала для предыдущей кнопки, но я не знаю, что делать дальше.

Ответы [ 2 ]

0 голосов
/ 21 февраля 2020

Ваш следующий / предыдущий, кажется, движется в неправильном направлении, но, по сути, он у вас есть.

Одно небольшое изменение, чтобы проверить, в конце ли вы: 

if (currentMarineKnotIndex + 1 == receivedArray.length) 
    currentMarineKnotIndex = 0; 
else 
    currentMarineKnotIndex++;

(или if (currentMarineKnotIndex == receivedArray.length - 1))

и наоборот: 

if (currentMarineKnotIndex == 0) {

они оба принимают индекс, начинающийся с нуля, который соответствует доступу к массиву.

Обновленный код , включая исправление следующего / предыдущего направления: 

$("#next-btn").on("click", function() {
  if (currentMarineKnotIndex == receivedArray.length - 1) {
    currentMarineKnotIndex = 0;
  } else {
    currentMarineKnotIndex++;
  }
  $("#marine-knot-div").html(receivedArray[currentMarineKnotIndex].nameLV + "<br>" + receivedArray[currentMarineKnotIndex].descriptionLV);
  $("#modal-header-div").css("background", "url('../Images/uploads/" + receivedArray[currentMarineKnotIndex].Image + "')");
});

$("#prev-btn").on("click", function() {
  if (currentMarineKnotIndex == 0) {
    currentMarineKnotIndex = receivedArray.length - 1;
  } else {
    currentMarineKnotIndex--;
  }
  $("#marine-knot-div").html(receivedArray[currentMarineKnotIndex].nameLV + "<br>" + receivedArray[currentMarineKnotIndex].descriptionLV);
  $("#modal-header-div").css("background", "url('../Images/uploads/" + receivedArray[currentMarineKnotIndex].Image + "')");
});

В качестве бонуса вы можете переместить части общего кода (.html и .css) в отдельную функцию, чтобы у вас не было дублированного кода, но это не было частью вопроса.

0 голосов
/ 21 февраля 2020

вам просто нужно изменить условие .. 

$("#next-btn").on("click", function() {
            if(currentMarineKnotIndex-1 == receivedArray.length){
                    currentMarineKnotIndex = receivedArray.length -1;
                }
                else{
                    currentMarineKnotIndex++;
                }
            $("#marine-knot-div").html(receivedArray[currentMarineKnotIndex].nameLV+"<br>"+receivedArray[currentMarineKnotIndex].descriptionLV);
            $("#modal-header-div").css("background", "url('../Images/uploads/"+receivedArray[currentMarineKnotIndex].Image+"')");
        });
        $("#prev-btn").on("click", function() {
           if(currentMarineKnotIndex+1 == 0){
                currentMarineKnotIndex = receivedArray.length - 1;
            }else{
                currentMarineKnotIndex--;
            }
            $("#marine-knot-div").html(receivedArray[currentMarineKnotIndex].nameLV+"<br>"+receivedArray[currentMarineKnotIndex].descriptionLV);
            $("#modal-header-div").css("background", "url('../Images/uploads/"+receivedArray[currentMarineKnotIndex].Image+"')");
...