JQuery的click函数不会触发，除非先双击

bzzcjhmw 于 2023-08-04 发布在 jQuery

关注(0)|答案(1)|浏览(92)

我在导航栏中有一个类为language-switch的div，它充当更改语言的按钮。我写了一段JQuery代码来改变div中Main id和文本的类，但它只能在第二次初始点击后触发。
我已经试过用$(document).ready(function(){} Package 它，但没有用。
令人困惑的是，我也有一个按钮，以改变主题从光明到黑暗所谓的mode-switch和它的工作，第一次不必双击第一。
这是它的HTML。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="navbar-wrapper">
        <div class="topnav" id="myTopnav">
          <span class="menu">
            <div class="language-switch">
                <div class="language">EN </div>
                <i class="fa fa-globe"></i>
            </div>
            <div class="mode-switch">
                <i class="fa fa-sun-o"></i>
            </div>
          </span>
        </div>
      </div>

字符串
language-switch按钮的JavaScript。

$(document).ready(function(){
    $(function changeLanguage(){
        $(".language-switch").click(function(){
        if ($(this).children(".language").text() == "EN") {
            $(this).children(".language").text("ID");
            $("#main").attr("class", "lang-id");
        }
        else {
            $(this).children(".language").text("EN");  
            $("#main").attr("class", "lang-en");      
        }
        console.log($(this).children(".language").text());
        console.log($("#main").attr("class"));
        });   
    });
});

型
JavaScript for mode-switch按钮。

$(document).ready(function(){
    $(".mode-switch").click(function(){
      $("i", this).toggleClass("fa-moon-o fa-sun-o");
      $(".light-theme").toggleClass("dark-theme");
      console.log($(this).attr("class"));
    });   
});

型

jquery

来源：https://stackoverflow.com/questions/76701409/jquery-click-function-doesnt-trigger-unless-double-clicked-first

1条答案

按热度按时间

rbpvctlc1#

你有一个函数changeLanguage，它反过来在$(".language-switch")元素上创建一个事件侦听器。在提供的代码中，似乎从未实际调用changeLanguage函数。
此外，语言节点中有一个尾随空格，因此，最初为“EN”！=“中文”
只需用途：

$(document).ready(function(){
    /*$(function changeLanguage(){ -- remove the function*/
        $(".language-switch").click(function(){
        if ($(this).children(".language").text().trim() == "EN") {
            $(this).children(".language").text("ID");
            $("#main").attr("class", "lang-id");
        }
        else {
            $(this).children(".language").text("EN");  
            $("#main").attr("class", "lang-en");      
        }
        console.log($(this).children(".language").text());
        console.log($("#main").attr("class"));
        });   
   /* }); */
});

字符串
也可以考虑使用classAdd。classRemove或classToggle，而不是完全重写class属性

$(document).ready(function(){
        $(".language-switch").click(function(){
        var isEn = $(this).children(".language").text("ID").trim() == "EN";

        $(this).children(".language").text(isEn ? "ID" : "EN");
        $("#main").togglClass("lang-id", isEn)
                  .togglClass("lang-en", !isEn);

        console.log($(this).children(".language").text());
        console.log($("#main").attr("class"));
        });   
});

型

赞(0）回复(0）举报 2023-08-04

我来回答

JQuery的click函数不会触发，除非先双击

1条答案

相关问题

热门标签

最新问答