jquery disable prev next buttonモーダル画像

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ルールを変更します無効要素を追加します。 prevと同じ
2. 、それはnextボタン

フィドルhere

Answer 1

disabled属性を使用すると、ポイントを獲得できます：

1. ボタンのスタイルが変更され、クリックできないように見えます。
2. ボタンはクリックできません。

注：あなたはCSSでbutton[disabled]セレクタを使用したいとあなたは無効なボタンのスタイルを設定することができます。

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