jQuery .on('click', function() 仅适用于第二次点击答案

【问题标题】：jQuery .on('click', function() only works on 2nd clickjQuery .on('click', function() 仅适用于第二次点击
【发布时间】：2016-04-11 23:21:49
【问题描述】：

我有一个自定义 jQuery 脚本，其中 .click();功能工作正常，但 .hide();和 .show();仅触发第二次点击。

HTML：

<div id="ivpa-content" class="ivpa-register ivpa_registered" data-variations="TLDR">    
    <div class="ivpa_attribute ivpa_text ivpa_background ivpa_selection" data-attribute="pa_foetel">
        <span class="ivpa_term ivpa_active ivpa_instock" data-term="elso-foetel"></span>
        <span class="ivpa_term ivpa_active ivpa_instock" data-term="masodik-foetel"></span>
        <span class="ivpa_term ivpa_active ivpa_instock" data-term="foetel-nelkul"></span>
    </div>
    <div class="ivpa_attribute ivpa_text ivpa_background ivpa_selection" data-attribute="pa_foetel-adag">
        <span class="ivpa_term ivpa_active ivpa_instock" data-term="foetel-fel-adag"></span>
        <span class="ivpa_term ivpa_active ivpa_instock" data-term="foetel-teljes-adag"></span>
        <span class="ivpa_term ivpa_active ivpa_instock" data-term="a-foetel-nelkul"></span>
    </div>
    <div class="ivpa_attribute ivpa_text ivpa_background ivpa_selection" data-attribute="pa_leves">
        <span class="ivpa_term ivpa_active ivpa_instock" data-term="elso-leves"></span>
        <span class="ivpa_term ivpa_active ivpa_instock" data-term="masodik-leves"></span>
        <span class="ivpa_term ivpa_active ivpa_instock" data-term="leves-nelkul"></span>
    </div>
    <div class="ivpa_attribute ivpa_text ivpa_background ivpa_selection" data-attribute="pa_leves-adag">
        <span class="ivpa_term ivpa_active ivpa_instock" data-term="leves-fel-adag"></span>
        <span class="ivpa_term ivpa_active ivpa_instock" data-term="leves-teljes-adag"></span>
        <span class="ivpa_term ivpa_active ivpa_instock" data-term="a-leves-nelkul"></span>
    </div>
    <a class="ivpa_reset_variations" href="#reset">Clear selection</a>
</div>

jQuery:

(function ($) {
var foetel_nelkul = $('[data-term="foetel-nelkul"]');
var foetel_adag = $('[data-attribute="pa_foetel-adag"]');
var elso_foetel = $('[data-term="elso-foetel"]');
var a_foetel_nelkul = $('[data-term="a-foetel-nelkul"]');
var foetel_fel_adag = $('[data-term="foetel-fel-adag"]');
var foetel_teljes_adag = $('[data-term="foetel-teljes-adag"]');

$(a_foetel_nelkul).hide();
$(foetel_adag).hide();

$(elso_foetel).on('click', function () {
    $(foetel_adag).show();
    if ($(foetel_nelkul).hasClass('ivpa_clicked')) {
        foetel_nelkul.click();
    }
    if ($(a_foetel_nelkul).hasClass('ivpa_clicked')) {
        a_foetel_nelkul.click();
    }
});
$(foetel_nelkul).on('click', function () {
    $(foetel_adag).hide();
    if ($(elso_foetel).hasClass('ivpa_clicked')) {
        elso_foetel.click();
        if ($(foetel_fel_adag).hasClass('ivpa_clicked')) {
            foetel_fel_adag.click();
        }
        if ($(foetel_teljes_adag).hasClass('ivpa_clicked')) {
            foetel_teljes_adag.click();
        }
        if ($(a_foetel_nelkul).hasClass('ivpa_clicked')) {
            a_foetel_nelkul.click();
        }
    }

因此，当我单击元素 $(elso_foetel) 时，它会显示出来，但我需要在 $(foetel_nelkul) 上单击两次才能隐藏 $(foetel_adag)；反之亦然。

提前感谢所有帮助！我真的需要度过这个难关。

【问题讨论】：

您是否尝试反转 if 条件。此外，您似乎有一些逻辑缺陷，当您单击一个元素时，它会触发对另一个元素的单击，这会再次触发对第一个元素的单击等。
嗯，有一个插件可以为 Woocommerce 可变产品的每个属性生成可点击字段。单击它会将所选属性注册到容器 div 的 data-attribute=" "。这对我来说太多了，不得不选择简单的方法
@ÁkosFerenczi - 您检查控制台是否有任何错误？
没有错误，但 adeneo 所说的关于点击混乱的说法是有道理的。
pastebin.com/YGECrkZP 这是脚本的作用。我认为魔法始于第 284 行。

标签： javascript jquery wordpress onclick woocommerce

【解决方案1】：

也许您可以将函数从 .on() 更改为：

$(foetel_nelkul).click(function() {
    // All of your code in the other function here
});

【讨论】：