Блог

Главная - Вопросы по программированию - Как мне назначить один и тот же код Javascript нескольким разделам, не запуская его одновременно

Как мне назначить один и тот же код Javascript нескольким разделам, не запуская его одновременно

#javascript #html #jquery #css #e-commerce

#javascript #HTML #jquery #css #электронная коммерция

Вопрос:

У меня есть небольшой магазин электронной коммерции, и у каждого из продуктов есть небольшая карточка продукта, созданная с помощью HTML, CSS и небольшого Jquery для анимации. Проблема в том, что когда я нажимаю div «добавить в корзину», каждый элемент добавляется в корзину, и анимация запускается для всех них. Я полагаю, что проблема может заключаться в том, что классы / идентификаторы для карточек продуктов одинаковы для каждой карты, и jquery знает только о запуске этого класса, поэтому он запускает их все, но есть ли какой-нибудь способ сделать так, чтобы jquery запускал анимацию только один раз для каждой карточки продукта? Код прилагается:

HTML:

     <div class="itemwrapper">
                        <div class="productcontainer">
                            <div class="cardtop" style="
  background: url(images/collar-1.jpeg) no-repeat center center; background-size: contain;"></div>
                            <div class="cardbottom">
                                <div class="cardleft">
                                    <div class="carddetails">
                                        <h1>Multifunction Collar</h1>
                                        <p>$21.99</p>
                                    </div>
                                    <div class="cardbuy"><img class="addtocart" src="images/cart-icon.png" width="85px" height="85px" /></div>
                                </div>
                                <div class="cardright">
                                    <div class="carddone"><img src="images/done.png" width="85px" height="85px" /></div>
                                    <div class="details">
                                        <h1>Multifunction Collar</h1>
                                        <p>Added to your cart</p>
                                    </div>
                                    <div class="cardremove"><img src="images/remove-icon.png" width="85px" height="85px" /></div>
                                </div>
                            </div>
                        </div>
                        <div class="cardinside">
                            <div class="cardicon"><img src="images/info.png" width="30px" height="30px" /> </div>
                            <div class="cardcontents">
                                <table class="cardtable">
                                    <tr>
                                        <th>Details: </th>
                                        <th></th>
                                    </tr>
                                    <tr>
                                        <td colspan="2" style="font-size: 15px">Multifunction collar with different hooks for tags and leash <br />This collar comes with fine high quality soft interior padding which is made exclusively from goat leather.</td>
                                    </tr>
                                    <tr>
                                        <th>Quantity: </th>
                                        <th></th>
                                    </tr>
                                    <tr>
                                        <td><input type="number" id="quantity" name="quantity" min="1" max="5" value="1"></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>

JS:

     $('.cardbuy').click(function(){
      $('.cardbottom').addClass("clicked");
    });

    $('.cardremove').click(function(){
      $('.cardbottom').removeClass("clicked");
    });

CSS:

 .itemwrapper {
    all: revert;
    width: 300px;
    height: 500px;
    background: white;
    margin: auto;
    position: relative;
    overflow: hidden;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0;
    transform: scale(0.95);
    transition: box-shadow 0.5s, transform 0.5s;
}

.itemwrapper:hover {
    transform: scale(1);
    box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}

.itemwrapper .productcontainer {
    width: 100%;
    height: 100%;
}

.itemwrapper .productcontainer .cardtop {
    height: 80%;
    width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
}

.itemwrapper .productcontainer .cardbottom {
    width: 200%;
    height: 20%;
    transition: transform 0.5s;
}

.itemwrapper .productcontainer .cardbottom.clicked {
    transform: translateX(-50%);
}

.itemwrapper .productcontainer .cardbottom h1 {
    margin: 0;
    padding: 0;
}

.itemwrapper .productcontainer .cardbottom p {
    margin: 0;
    padding: 0;
}

.itemwrapper .productcontainer .cardbottom .cardleft {
    height: 100%;
    width: 50%;
    background: #f4f4f4;
    position: relative;
    float: left;
}

.itemwrapper .productcontainer .cardbottom .cardleft .carddetails {
    padding: 15px;
    float: left;
    width: calc(70% - 40px);
}

.itemwrapper .productcontainer .cardbottom .cardleft .cardbuy {
    float: right;
    width: calc(30% - 3px);
    height: 100%;
    background: #f1f1f1;
    transition: background 0.5s;
    border-left: solid thin rgba(0, 0, 0, 0.1);
}

.itemwrapper .productcontainer .cardbottom .cardleft .cardbuy i {
    font-size: 30px;
    padding: 30px;
    color: #254053;
    transition: transform 0.5s;
}

.itemwrapper .productcontainer .cardbottom .cardleft .cardbuy:hover {
    background: #A6CDDE;
}

.itemwrapper .productcontainer .cardbottom .cardleft .cardbuy:hover i {
    transform: translateY(5px);
    color: #00394B;
}

.itemwrapper .productcontainer .cardbottom .cardright {
    width: 50%;
    background: #A6CDDE;
    color: white;
    float: right;
    height: 200%;
    overflow: hidden;
}

.itemwrapper .productcontainer .cardbottom .cardright .details {
    padding: 10px;
    float: right;
    width: calc(70% - 40px);
}

.itemwrapper .productcontainer .cardbottom .cardright .carddone {
    width: calc(30% - 2px);
    float: left;
    transition: transform 0.5s;
    border-right: solid thin rgba(255, 255, 255, 0.3);
    height: 50%;
}

.itemwrapper .productcontainer .cardbottom .cardright .carddone i {
    font-size: 30px;
    padding: 30px;
    color: white;
}

.itemwrapper .productcontainer .cardbottom .cardright .cardremove {
    width: calc(30% - 1px);
    clear: both;
    border-right: solid thin rgba(255, 255, 255, 0.3);
    height: 50%;
    background: #BC3B59;
    transition: transform 0.5s, background 0.5s;
}

.itemwrapper .productcontainer .cardbottom .cardright .cardremove:hover {
    background: #9B2847;
}

.itemwrapper .productcontainer .cardbottom .cardright .cardremove:hover i {
    transform: translateY(5px);
}

.itemwrapper .productcontainer .cardbottom .cardright .cardremove i {
    transition: transform 0.5s;
    font-size: 30px;
    padding: 30px;
    color: white;
}

.itemwrapper .productcontainer .cardbottom .cardright:hover .cardremove,
.itemwrapper .productcontainer .cardbottom .cardright:hover .carddone {
    transform: translateY(-100%);
}

.itemwrapper .cardinside {
    z-index: 9;
    background: rgb(255, 232, 209);
    width: 140px;
    height: 140px;
    position: absolute;
    top: -70px;
    right: -70px;
    border-radius: 0px 0px 200px 200px;
    transition: all 0.5s, border-radius 2s, top 1s;
    overflow: hidden;
}

.itemwrapper .cardinside .cardicon {
    position: absolute;
    right: 85px;
    top: 85px;
    color: white;
    opacity: 1;
}

.itemwrapper .cardinside:hover {
    width: 100%;
    right: 0;
    top: 0;
    border-radius: 0;
    height: 80%;
}

.itemwrapper .cardinside:hover .cardicon {
    opacity: 0;
    right: 15px;
    top: 15px;
}

.itemwrapper .cardinside:hover .cardcontents {
    opacity: 1;
    transform: scale(1);
    transform: translateY(0);
}

.itemwrapper .cardinside .cardcontents {
    padding: 5%;
    opacity: 0;
    transform: scale(0.5);
    transform: translateY(-200%);
    transition: opacity 0.2s, transform 0.8s;
}

.itemwrapper .cardinside .cardcontents .cardtable {
    text-align: left;
    width: 100%;
}

.itemwrapper .cardinside .cardcontents h1,
.itemwrapper .cardinside .cardcontents p,
.itemwrapper .cardinside .cardcontents .cardtable {
    color: black;
}

.itemwrapper .cardinside .cardcontents p {
    font-size: 13px;
}

Ответ №1:

Я думаю, вам захочется чего-то подобного.

 $('.cardbuy').on('click', function() {
    $(this).parent('.cardbottom').addClass('clicked') // find the closest parent element with the class "cardbottom" and add the "clicked"
})

«это» будет ссылаться на элемент, на который был нажат. В вашем коде вы ориентируетесь на все элементы с классом «cardbuy».

Комментарии:

1. В моем коде элемент, на который нажимается, является значком «добавить в корзину», так будет ли «это» относиться к значку? Один и тот же значок используется в каждой карточке товара, и каждый значок имеет класс «.cardbuy», который и является причиной проблемы. Будет ли это по-прежнему работать?

2. $(this) будет ссылаться на конкретный элемент с тем классом, который был нажат в данном случае. Поэтому, когда вы нажимаете на значок этого продукта, он смотрит на этот конкретный .cardbuy элемент, затем вы просматриваете dom, просматриваете его ближайший parent элемент для класса с помощью with cardbottom и добавляете к нему класс clicked .

Метки: