jquery disable prev next button modal image

Question

Мне нужно изменить кнопку css prev и next, когда находится первый ребенок и последний ребенок.

Я думал об этом коде, но не успех:

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

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

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

Мои цели:

1. Когда я не нажмёте prev до первого элемента он изменит правила CSS в чтобы добавить эффект отключения.
2. То же prev, но для next кнопки

скрипку here

Answer 1

Вы можете использовать атрибут disabled, чтобы заработать очки:

1. Стиль кнопки изменится и будет виден не кликабельным.
2. Кнопка не будет нажата.

Примечание: Вы можете стилизовать кнопку инвалидов, как вы хотите, используя button[disabled] селектор в CSS.

Теперь к коду:

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

Answer 2

Я установил предыдущую кнопку, я думаю, что вы можете сделать следующее сейчас,)

$(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/