Как правильно сделать условие "если значения атрибутов совпадают, то..."

Рейтинг: 0Ответов: 1Опубликовано: 27.01.2023

Делаю галерею и не очень получается сделать условие если src у миниатюры по которой я кликнул и у большого фото совпадают, то $('.collapse').removeClass('show');. Нужно для того чтобы скрывать большое фото при повторном клике по той миниатюре, с помощью которой я его открыл. Можете помочь?

$('.snipsnapp_screenshot_galery img').click(function(){
    if($('.snipsnapp_screenshot_galery_big').attr('src') == $(this).attr('src'))
        $('.collapse').removeClass('show');
    else
        $('.collapse').removeClass('show');
        $('.snipsnapp_screenshot_galery_big').attr('src', $(this).attr('src'));
        $('.collapse').addClass('show');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

<div class="row pt-3 pb-3 snipsnapp_screenshot_galery">
    <div class="col-1 d-inline">
        <img src="https://media.istockphoto.com/id/835370890/photo/sunset-sunrise-with-clouds-light-rays-and-other-atmospheric-effect.jpg?s=612x612&amp;w=0&amp;k=20&amp;c=zGDOBYVFY74wX2gUgkonYGtNl1zenev5mPotAqUlJbM=" class="img-fluid rounded">
    </div>
    <div class="col-1 d-inline">
        <img src="https://www.adorama.com/alc/wp-content/uploads/2017/11/shutterstock_114802408.jpg" class="img-fluid rounded">
    </div>
    <div class="col-1 d-inline">
        <img src="https://cdn.britannica.com/74/182174-050-6755AB49/balloon-sky.jpg" class="img-fluid rounded">
    </div>
    <div class="col-1 d-inline">
        <img src="https://media.istockphoto.com/id/1368007300/video/sun-comes-out-from-behind-a-cloud-in-the-early-morning-above-the-clouds-flying-above-the.jpg?b=1&s=640x640&k=20&c=WedPUUgBFvgzvAMQDlrTQPMx_Ww6emScWM8I4C2hA4g=" class="img-fluid rounded">
    </div>
</div>
<div class="collapse show">
    <img src="" class="d-block pb-3 pt-3 w-100 snipsnapp_screenshot_galery_big">
</div>

javascript jquery
Источник: Stack Overflow на русском

Ответы

▲ 0Принят
  1. У вас в if else не расставлены фигурные скобки
  2. Надо убирать src когда скрываете картинку, иначе при следующем клике срабатывает 1-е условие

$('.snipsnapp_screenshot_galery img').click(function(){
    if($('.snipsnapp_screenshot_galery_big').attr('src') == $(this).attr('src')) {
        $('.collapse').removeClass('show');
        $('.snipsnapp_screenshot_galery_big').attr('src', '');
    } else {
        $('.collapse').removeClass('show');
        $('.snipsnapp_screenshot_galery_big').attr('src', $(this).attr('src'));
        $('.collapse').addClass('show');
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

<div class="row pt-3 pb-3 snipsnapp_screenshot_galery">
    <div class="col-1 d-inline">
        <img src="https://media.istockphoto.com/id/835370890/photo/sunset-sunrise-with-clouds-light-rays-and-other-atmospheric-effect.jpg?s=612x612&amp;w=0&amp;k=20&amp;c=zGDOBYVFY74wX2gUgkonYGtNl1zenev5mPotAqUlJbM=" class="img-fluid rounded">
    </div>
    <div class="col-1 d-inline">
        <img src="https://www.adorama.com/alc/wp-content/uploads/2017/11/shutterstock_114802408.jpg" class="img-fluid rounded">
    </div>
    <div class="col-1 d-inline">
        <img src="https://cdn.britannica.com/74/182174-050-6755AB49/balloon-sky.jpg" class="img-fluid rounded">
    </div>
    <div class="col-1 d-inline">
        <img src="https://media.istockphoto.com/id/1368007300/video/sun-comes-out-from-behind-a-cloud-in-the-early-morning-above-the-clouds-flying-above-the.jpg?b=1&s=640x640&k=20&c=WedPUUgBFvgzvAMQDlrTQPMx_Ww6emScWM8I4C2hA4g=" class="img-fluid rounded">
    </div>
</div>
<div class="collapse show">
    <img src="" class="d-block pb-3 pt-3 w-100 snipsnapp_screenshot_galery_big">
</div>