Как, используя jquery, выполнить скрипт только для 1 карточки?

Question

[montpellier]

Есть 3 карточки и батоны на них, как сделать, чтобы при клике по кнопке срабатывала только та кнопка на той карточке, где нажал. У всех кнопок id одинаковые.

<script>
    $('#aboutfilm').click(function(){
        $('.test').addClass('card-text-change');
        $('.card-text').css('opacity','1');
    });
    $('#aboutfilm').click(function(){
        $(this).css('display','none')
    });
</script>

Comments

[eduardich]

Ну как минимум id должен быть уникальным для всей страницы

Answer 1

[DanKud]

Во-первых id это уникальный идентификатор. Делать несколько элементов с одним id это в корне неправильно + через JQuery по id вы получите в ответ только один элемент. Используйте классы:

<div class="aboutfilm">
    .....
</div>

<script>
$('.aboutfilm').each(function() {
    $(this).on('click', () => {
        $(this).parent().find('.test').addClass('card-text-change');
        $(this).parent().find('.card-text').css('opacity', '1');
        $(this).css('display','none');
    });
});
</script>

Comments

[montpellier]

Вот кусок для 1 карточки

<div class="col-12 col-md-6 col-lg-4 col-lg-4">
                <div class="card ">
                    <img class="card-img-top" src="img/baklanskii rubej.jpg" alt="Card image cap">
                    <div class="card-body">
                        <div class="card-img-overlay h-auto d-flex flex-column justify-content-end">
                            <button id="aboutfilm" class="btn text-white">О фильме</button>
                            <div class="test">
                                <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, consectetur?</p>
                            </div>                              
                        </div> 
                    </div>                                       
                </div>
            </div>

[DanKud]

montpellier, значит я вам все верно написал. Код, который в сообщение, будет работать в вашем блоке. Вам нужно только поменять <button id="aboutfilm" на <button class="aboutfilm"

[montpellier]

DanKud, Спасибо огромное

[Rustam Bainazarov]

montpellier, отметьте решением.