Блог

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

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

#javascript #html #jquery

Вопрос:

У меня есть меню с несколькими кнопками, каждая из которых имеет свой класс .categorieknop . При нажатии на эту кнопку я хочу загрузить все изображения с определенным классом, заменив src . Это работает, за исключением того, что я хочу, чтобы все изображения загружались сразу, и независимо от того, что .categorieknop нажато, никогда не запускайте его снова, пока страница не будет перезагружена.

Поэтому я сделал это:

 $('.categorieknop').one("click", function(e) {
    console.log('test');
    $(".prodmenuimg" ).each(function() {
        $datasrc = $(this).attr('data-src');
        $(this).attr("src", $datasrc);
    });
});

У каждого изображения есть свой класс .prodmenuimg . При нажатии .categorieknop все изображения загружаются, но когда я нажимаю на другую кнопку .categorieknop , все они загружаются снова. Это происходит один раз за каждый .categorieknop мой щелчок.

Как я могу быть уверен, что независимо от того, какой из них будет нажат, он всегда будет запускаться только один раз, а если .categorieknop после этого будет нажат другой, он больше не будет запускаться?

Я думал one , что сделал это, но я думаю, что когда есть несколько элементов с одним и тем же классом, эта функция срабатывает один раз для каждого из них.

Моя структура html, если это имеет значение:

 <span class="animate__animated animate__faster" id="menu1">
    <li>
        <a class="categorieknop activecategorieknop" href="javascript:void(0);"><i class="menu-afb icon-woonkamer"></i> <span>Woonkamer</span></a>
        <div id="prodmenu" class="product-menu menuflex">
            <div class="productmenucontainer">
                <div class="producten">
                    <div class="productgroup">
                        <h2 class="productmenukop">Woonkamer</h2>
                        <ul class="fivecolumns">
                            <li>
                                <a href="plaat/foto-op-hout"><img class="prodmenuimg" data-src="cms/images/Impressies/603_1bc1d5ebfe2bc86f_21.jpg" src="cms/images/Impressies/603_1bc1d5ebfe2bc86f_21.jpg" />Foto op hout</a>
                            </li>
                            <li>
                                <a href="plaat/foto-op-paneel">
                                    <img class="prodmenuimg" data-src="cms/images/producten/foto-op-paneel/thumbnail/Dibond_butler_finish_1.jpg" src="cms/images/producten/foto-op-paneel/thumbnail/Dibond_butler_finish_1.jpg" />Foto op paneel
                                </a>
                            </li>
                            <li>
                                <a href="plaat/fotoblok">
                                    <img class="prodmenuimg" data-src="cms/images/producten/fotoblok/afbeeldingen/604_30ce36618aa6d545_2.jpg" src="cms/images/producten/fotoblok/afbeeldingen/604_30ce36618aa6d545_2.jpg" />Fotoblok
                                </a>
                            </li>
                            <li>
                                <a href="folie/muursticker">
                                    <img class="prodmenuimg" data-src="cms/images/producten/muursticker/afbeeldingen/2017_23e4cfbbe228dd0b_2.jpg" src="cms/images/producten/muursticker/afbeeldingen/2017_23e4cfbbe228dd0b_2.jpg" />Muursticker
                                </a>
                            </li>
                            <li>
                                <a href="textiel/bedrukken-naadloos-fotobehang-printen">
                                    <img
                                        class="prodmenuimg"
                                        data-src="cms/images/producten/bedrukken-naadloos-fotobehang-printen/thumbnail/Naadloosbehang_makkelijk_aanbrengen.jpg"
                                        src="cms/images/producten/bedrukken-naadloos-fotobehang-printen/thumbnail/Naadloosbehang_makkelijk_aanbrengen.jpg"
                                    />
                                    Naadloos fotobehang
                                </a>
                            </li>
                            <li>
                                <a href="folie/raamsticker">
                                    <img class="prodmenuimg" data-src="cms/images/producten/raamsticker/thumbnail/1_Raamsticker_privacy.jpg" src="cms/images/producten/raamsticker/thumbnail/1_Raamsticker_privacy.jpg" />Raamsticker
                                </a>
                            </li>
                            <li>
                                <a href="textiel/tafelkleed">
                                    <img
                                        class="prodmenuimg"
                                        data-src="cms/images/producten/tafelkleed/afbeeldingen/1_Tafelkleed_met_foto_uit_website_studio.jpg"
                                        src="cms/images/producten/tafelkleed/afbeeldingen/1_Tafelkleed_met_foto_uit_website_studio.jpg"
                                    />
                                    Salon tafelkleed
                                </a>
                            </li>
                            <li>
                                <a href="textiel/sierkussens-binnen">
                                    <img class="prodmenuimg" data-src="cms/images/producten/sierkussens-binnen/afbeeldingen/sierkussen_1.jpg" src="cms/images/producten/sierkussens-binnen/afbeeldingen/sierkussen_1.jpg" />Sierkussens binnen
                                </a>
                            </li>
                            <li>
                                <a href="textiel/wandkleed">
                                    <img class="prodmenuimg" data-src="cms/images/producten/wandkleed/afbeeldingen/1_wandkleed_met_je_eigen_foto.jpg" src="cms/images/producten/wandkleed/afbeeldingen/1_wandkleed_met_je_eigen_foto.jpg" />
                                    Wandkleed
                                </a>
                            </li>
                            <li>
                                <a href="folie/zandstraalfolie">
                                    <img
                                        class="prodmenuimg"
                                        data-src="cms/images/producten/zandstraalfolie/afbeeldingen/7ED3F649-4149-49CC-B831-5D15E4376788.jpg"
                                        src="cms/images/producten/zandstraalfolie/afbeeldingen/7ED3F649-4149-49CC-B831-5D15E4376788.jpg"
                                    />
                                    Zandstraalfolie
                                </a>
                            </li>
                            <li>
                                <a href="textiel/zitzak">
                                    <img class="prodmenuimg" data-src="cms/images/producten/zitzak/afbeeldingen/1_1815_d2c031dca10bfc12_1.jpg" src="cms/images/producten/zitzak/afbeeldingen/1_1815_d2c031dca10bfc12_1.jpg" />Zitzak
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="absolutemenuimg">
                <img src="cms/images/menu_afbeeldingen/woonkamer_3d.jpg" />
                <p class="menucatalogusbtn"><a class="purplebtn btnstyle" href="catalogus/woonkamer">Bekijk de woonkamer</a></p>
            </div>
        </div>
    </li>
    <li>
        <a class="categorieknop" href="javascript:void(0);"><i class="menu-afb icon-slaapkamer"></i> <span>Slaapkamer</span></a>
        <div id="prodmenu" class="product-menu menunone">
            <div class="productmenucontainer">
                <div class="producten">
                    <div class="productgroup">
                        <h2 class="productmenukop">Slaapkamer</h2>
                        <ul class="fivecolumns">
                            <li>
                                <a href="plaat/blind-ophangsysteem">
                                    <img
                                        class="prodmenuimg"
                                        data-src="cms/images/producten/blind-ophangsysteem/afbeeldingen/1157_7725c8ceac772b8b_1.jpg"
                                        src="cms/images/producten/blind-ophangsysteem/afbeeldingen/1157_7725c8ceac772b8b_1.jpg"
                                    />
                                    Blind ophangsysteem
                                </a>
                            </li>
                            <li>
                                <a href="plaat/deelpaneel">
                                    <img class="prodmenuimg" data-src="cms/images/producten/deelpaneel/afbeeldingen/_deelpaneel_foto_op_rvs.jpg" src="cms/images/producten/deelpaneel/afbeeldingen/_deelpaneel_foto_op_rvs.jpg" />Deelpaneel
                                </a>
                            </li>
                            <li>
                                <a href="textiel/dekbedovertrek">
                                    <img
                                        class="prodmenuimg"
                                        data-src="cms/images/producten/dekbedovertrek/afbeeldingen/3_Dekbedovertrek_kunst_en_nogeens_kunst.jpg"
                                        src="cms/images/producten/dekbedovertrek/afbeeldingen/3_Dekbedovertrek_kunst_en_nogeens_kunst.jpg"
                                    />
                                    Dekbedovertrek
                                </a>
                            </li>
                            <li>
                                <a href="plaat/foto-op-hout">
                                    <img class="prodmenuimg" data-src="cms/images/producten/foto-op-hout/thumbnail/602_5b1e2c156babed4c_2_2.jpg" src="cms/images/producten/foto-op-hout/thumbnail/602_5b1e2c156babed4c_2_2.jpg" />Foto op hout
                                </a>
                            </li>
                            <li>
                                <a href="plaat/foto-op-paneel">
                                    <img class="prodmenuimg" data-src="cms/images/producten/foto-op-paneel/thumbnail/Dibond_butler_finish_1_thumb.jpg" src="cms/images/producten/foto-op-paneel/thumbnail/Dibond_butler_finish_1_thumb.jpg" />
                                    Foto op paneel
                                </a>
                            </li>
                            <li>
                                <a href="plaat/fotoblok">
                                    <img class="prodmenuimg" data-src="cms/images/producten/fotoblok/afbeeldingen/1_Fotoblok_verschillende_maten.jpg" src="cms/images/producten/fotoblok/afbeeldingen/1_Fotoblok_verschillende_maten.jpg" />
                                    Fotoblok
                                </a>
                            </li>
                            <li>
                                <a href="textiel/kussensloop">
                                    <img
                                        class="prodmenuimg"
                                        data-src="cms/images/producten/kussensloop/afbeeldingen/1_Kussensloop_kunst_en_nogeens_kunst.jpg"
                                        src="cms/images/producten/kussensloop/afbeeldingen/1_Kussensloop_kunst_en_nogeens_kunst.jpg"
                                    />
                                    Kussensloop
                                </a>
                            </li>
                            <li>
                                <a href="plaat/muurcirkel">
                                    <img class="prodmenuimg" data-src="cms/images/producten/muurcirkel/afbeeldingen/Muurcirkel_eigen_ontwerp.jpg" src="cms/images/producten/muurcirkel/afbeeldingen/Muurcirkel_eigen_ontwerp.jpg" />Muurcirkel
                                </a>
                            </li>
                            <li>
                                <a href="folie/muursticker">
                                    <img class="prodmenuimg" data-src="cms/images/producten/muursticker/afbeeldingen/2016_75cb3d20928b7c9b_2.jpg" src="cms/images/producten/muursticker/afbeeldingen/2016_75cb3d20928b7c9b_2.jpg" />Muursticker
                                </a>
                            </li>
                            <li>
                                <a href="textiel/bedrukken-naadloos-fotobehang-printen">
                                    <img
                                        class="prodmenuimg"
                                        data-src="cms/images/producten/bedrukken-naadloos-fotobehang-printen/thumbnail/Naadloosbehang_makkelijk_aanbrengen_thumb.jpg"
                                        src="cms/images/producten/bedrukken-naadloos-fotobehang-printen/thumbnail/Naadloosbehang_makkelijk_aanbrengen_thumb.jpg"
                                    />
                                    Naadloos fotobehang
                                </a>
                            </li>
                            <li>
                                <a href="folie/raamsticker">
                                    <img class="prodmenuimg" data-src="cms/images/producten/raamsticker/thumbnail/1_Raamsticker_privacy.jpg" src="cms/images/producten/raamsticker/thumbnail/1_Raamsticker_privacy.jpg" />Raamsticker
                                </a>
                            </li>
                            <li>
                                <a href="textiel/sierkussens-binnen">
                                    <img class="prodmenuimg" data-src="cms/images/producten/sierkussens-binnen/afbeeldingen/sierkussen_3.jpg" src="cms/images/producten/sierkussens-binnen/afbeeldingen/sierkussen_3.jpg" />Slaapkamer kussens
                                </a>
                            </li>
                            <li>
                                <a href="textiel/textielwand">
                                    <img class="prodmenuimg" data-src="cms/images/producten/textielframe/afbeeldingen/4_1289_1cdc813e6fc6e815_1.jpg" src="cms/images/producten/textielframe/afbeeldingen/4_1289_1cdc813e6fc6e815_1.jpg" />
                                    Textielwand
                                </a>
                            </li>
                            <li>
                                <a href="folie/zandstraalfolie">
                                    <img
                                        class="prodmenuimg"
                                        data-src="cms/images/producten/zandstraalfolie/afbeeldingen/7ED3F649-4149-49CC-B831-5D15E4376788.jpg"
                                        src="cms/images/producten/zandstraalfolie/afbeeldingen/7ED3F649-4149-49CC-B831-5D15E4376788.jpg"
                                    />
                                    Zandstraalfolie
                                </a>
                            </li>
                            <li>
                                <a href="textiel/zitzak"><img class="prodmenuimg" data-src="cms/images/producten/zitzak/thumbnail/zitzak-1_thumb.jpg" src="cms/images/producten/zitzak/thumbnail/zitzak-1_thumb.jpg" />Zitzak</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="absolutemenuimg">
                <img src="cms/images/menu_afbeeldingen/slaapkamer_3d.jpg" />
                <p class="menucatalogusbtn"><a class="purplebtn btnstyle" href="catalogus/slaapkamer">Bekijk de slaapkamer</a></p>
            </div>
        </div>
    </li>
    <li>
        <a class="categorieknop" href="javascript:void(0);"><i class="menu-afb icon-keuken"></i> <span>Keuken</span></a>
        <div id="prodmenu" class="product-menu menunone">
            <div class="productmenucontainer">
                <div class="producten">
                    <div class="productgroup">
                        <h2 class="productmenukop">Keuken</h2>
                        <ul class="fivecolumns">
                            <li>
                                <a href="plaat/foto-op-paneel">
                                    <img class="prodmenuimg" data-src="cms/images/producten/foto-op-paneel/thumbnail/Dibond_butler_finish_1_thumb.jpg" src="cms/images/producten/foto-op-paneel/thumbnail/Dibond_butler_finish_1_thumb.jpg" />
                                    Foto op paneel
                                </a>
                            </li>
                            <li>
                                <a href="plaat/keuken-achterwand">
                                    <img
                                        class="prodmenuimg"
                                        data-src="cms/images/producten/keuken-achterwand/afbeeldingen/Keukenachterwand_uniek_met_eigen_ontwerp.jpg"
                                        src="cms/images/producten/keuken-achterwand/afbeeldingen/Keukenachterwand_uniek_met_eigen_ontwerp.jpg"
                                    />
                                    Keuken achterwand
                                </a>
                            </li>
                            <li>
                                <a href="plaat/muurcirkel">
                                    <img class="prodmenuimg" data-src="cms/images/producten/muurcirkel/afbeeldingen/Muurcirkel_eigen_ontwerp.jpg" src="cms/images/producten/muurcirkel/afbeeldingen/Muurcirkel_eigen_ontwerp.jpg" />Muurcirkel
                                </a>
                            </li>
                            <li>
                                <a href="folie/muursticker">
                                    <img class="prodmenuimg" data-src="cms/images/producten/muursticker/afbeeldingen/2017_23e4cfbbe228dd0b_2.jpg" src="cms/images/producten/muursticker/afbeeldingen/2017_23e4cfbbe228dd0b_2.jpg" />Muursticker
                                </a>
                            </li>
                            <li>
                                <a href="textiel/bedrukken-naadloos-fotobehang-printen">
                                    <img
                                        class="prodmenuimg"
                                        data-src="cms/images/producten/bedrukken-naadloos-fotobehang-printen/thumbnail/Naadloosbehang_makkelijk_aanbrengen_thumb.jpg"
                                        src="cms/images/producten/bedrukken-naadloos-fotobehang-printen/thumbnail/Naadloosbehang_makkelijk_aanbrengen_thumb.jpg"
                                    />
                                    Naadloos fotobehang
                                </a>
                            </li>
                            <li>
                                <a href="papier-karton/placemats">
                                    <img class="prodmenuimg" data-src="cms/images/producten/placemats/thumbnail/1404_9735a303173c73c3_thumb.jpg" src="cms/images/producten/placemats/thumbnail/1404_9735a303173c73c3_thumb.jpg" />Placemats
                                    papier
                                </a>
                            </li>
                            <li>
                                <a href="textiel/placemats-textiel">
                                    <img
                                        class="prodmenuimg"
                                        data-src="cms/images/producten/placemats-textiel/afbeeldingen/Placemat_textiel_eigen_ontwerp.jpg"
                                        src="cms/images/producten/placemats-textiel/afbeeldingen/Placemat_textiel_eigen_ontwerp.jpg"
                                    />
                                    Placemats textiel
                                </a>
                            </li>
                            <li>
                                <a href="textiel/sierkussens-binnen">
                                    <img class="prodmenuimg" data-src="cms/images/producten/sierkussens-binnen/afbeeldingen/sierkussen_1.jpg" src="cms/images/producten/sierkussens-binnen/afbeeldingen/sierkussen_1.jpg" />Sierkussens binnen
                                </a>
                            </li>
                            <li>
                                <a href="textiel/tafelkleed">
                                    <img
                                        class="prodmenuimg"
                                        data-src="cms/images/producten/tafelkleed/afbeeldingen/1_Tafelkleed_met_foto_uit_website_studio.jpg"
                                        src="cms/images/producten/tafelkleed/afbeeldingen/1_Tafelkleed_met_foto_uit_website_studio.jpg"
                                    />
                                    Tafelkleed
                                </a>
                            </li>
                            <li>
                                <a href="folie/zandstraalfolie">
                                    <img
                                        class="prodmenuimg"
                                        data-src="cms/images/producten/zandstraalfolie/afbeeldingen/7ED3F649-4149-49CC-B831-5D15E4376788.jpg"
                                        src="cms/images/producten/zandstraalfolie/afbeeldingen/7ED3F649-4149-49CC-B831-5D15E4376788.jpg"
                                    />
                                    Zandstraalfolie
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="absolutemenuimg">
                <img src="cms/images/menu_afbeeldingen/keuken_3d.jpg" />
                <p class="menucatalogusbtn"><a class="purplebtn btnstyle" href="catalogus/keuken">Bekijk de keuken</a></p>
            </div>
        </div>
    </li>
    <li>
        <a class="categorieknop" href="javascript:void(0);"><i class="menu-afb icon-tuin"></i> <span>Tuin</span></a>
        <div id="prodmenu" class="product-menu menunone">
            <div class="productmenucontainer">
                <div class="producten">
                    <div class="productgroup">
                        <h2 class="productmenukop">Tuin</h2>
                        <ul class="fivecolumns">
                            <li>
                                <a href="papier-karton/placemats-textiel">
                                    <img
                                        class="prodmenuimg"
                                        data-src="cms/images/producten/placemats-textiel/afbeeldingen/Placemat_textiel_eigen_ontwerp.jpg"
                                        src="cms/images/producten/placemats-textiel/afbeeldingen/Placemat_textiel_eigen_ontwerp.jpg"
                                    />
                                    Placemats textiel
                                </a>
                            </li>
                            <li>
                                <a href="textiel/sierkussens-buiten">
                                    <img
                                        class="prodmenuimg"
                                        data-src="cms/images/producten/sierkussens-buiten/afbeeldingen/Sierkussen_Outdoor_hoogwaardige_kwaliteit.jpg"
                                        src="cms/images/producten/sierkussens-buiten/afbeeldingen/Sierkussen_Outdoor_hoogwaardige_kwaliteit.jpg"
                                    />
                                    Sierkussens Outdoor
                                </a>
                            </li>
                            <li>
                                <a href="textiel/tafelkleed">
                                    <img
                                        class="prodmenuimg"
                                        data-src="cms/images/producten/tafelkleed/afbeeldingen/Tafelkleed_met_je_eigen_ontwerp.jpg"
                                        src="cms/images/producten/tafelkleed/afbeeldingen/Tafelkleed_met_je_eigen_ontwerp.jpg"
                                    />
                                    Tafelkleed
                                </a>
                            </li>
                            <li>
                                <a href="textiel/zitzak">
                                    <img class="prodmenuimg" data-src="cms/images/producten/zitzak/afbeeldingen/4_549_22ed819692c7b8fe.jpg" src="cms/images/producten/zitzak/afbeeldingen/4_549_22ed819692c7b8fe.jpg" />Zitzak outdoor
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="absolutemenuimg">
                <img src="cms/images/menu_afbeeldingen/tuin_color_3d.jpg" />
                <p class="menucatalogusbtn"><a class="purplebtn btnstyle" href="catalogus/tuin">Bekijk de tuin</a></p>
            </div>
        </div>
    </li>
    <li>
        <a class="categorieknop" href="javascript:void(0);"><i class="menu-afb icon-feestje"></i> <span>Feestje?</span></a>
        <div id="prodmenu" class="product-menu menunone">
            <div class="productmenucontainer">
                <div class="producten">
                    <div class="productgroup">
                        <h2 class="productmenukop">Feestje?</h2>
                        <ul class="fivecolumns"></ul>
                    </div>
                </div>
            </div>
            <div class="absolutemenuimg">
                <img src="cms/images/menu_afbeeldingen/woonkamer_3d.jpg" />
                <p class="menucatalogusbtn"><a class="purplebtn btnstyle" href="javascript:void(0);">Binnenkort beschikbaar</a></p>
            </div>
        </div>
    </li>
    <li>
        <a class="categorieknop" href="javascript:void(0);"><i class="menu-afb icon-bedrijf"></i> <span>Eigen bedrijf?</span></a>
        <div id="prodmenu" class="product-menu menunone">
            <div class="productmenucontainer">
                <div class="producten">
                    <div class="productgroup">
                        <h2 class="productmenukop">Eigen bedrijf?</h2>
                        <ul class="fivecolumns"></ul>
                    </div>
                </div>
            </div>
            <div class="absolutemenuimg">
                <img src="cms/images/menu_afbeeldingen/woonkamer_3d.jpg" />
                <p class="menucatalogusbtn"><a class="purplebtn btnstyle" href="javascript:void(0);">Binnenkort beschikbaar</a></p>
            </div>
        </div>
    </li>
</span>

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

1.api.jquery.com/one Обработчик выполняется не чаще одного раза для каждого элемента для каждого типа события.

Ответ №1:

Вместо того , чтобы использовать .one() , это, вероятно, было бы лучшим вариантом использования .on() и руководством .off() . Вы могли бы переписать его примерно так:

 const buttons = $('.categorieknop');

function clickHandler(e) {
    console.log('test');
    $(".prodmenuimg" ).each(function() {
        $datasrc = $(this).attr('data-src');
        $(this).attr("src", $datasrc);
    });
    buttons.off("click", clickHandler);
}

buttons.on("click", clickHandler);

Вот простой пример:

 const buttons = $('.categorieknop');

function clickHandler(e) {
    console.log('test');
    buttons.off("click", clickHandler);
}

buttons.on("click", clickHandler); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="categorieknop">categorieknop1</div>
<div class="categorieknop">categorieknop2</div>
<div class="categorieknop">categorieknop3</div>
<div class="categorieknop">categorieknop4</div>

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

1. Дополнительные опции: $('.categorieknop').off("click") будет работать, так как маловероятно, что оператору потребуется еще одно нажатие на эту кнопку. Или вы можете использовать имена событий в пространствах имен, чтобы устранить необходимость в clickHandler .off("click", clickHandler); .

2. Спасибо! Отлично работает.

Метки: , ,