问题[jquery](coding)

我有一些 jQuery 代码来处理移动设备的下拉菜单。它在 Firefox 上运行良好，但在 Chrome 和移动设备上却不行。

我的网站是https://excelwebdesign.ie，代码已经监听了，但是不起作用，没有任何错误。我不知道为什么。看我的截图。

在此处输入图片描述

这是我的代码：

jQuery(document).ready(function(){
        jQuery(".menu-toggle").click(function(){
            if(jQuery(this).hasClass("open")){
                jQuery(this).removeClass("open");
                jQuery("body").removeClass("navigation-open");
                
                jQuery("#menu-main-menu-mobile").children("li").hide();
            }else{
                jQuery(this).addClass("open");
                jQuery("body").addClass("navigation-open");
                
                jQuery("#menu-main-menu-mobile").children("li").each(function(i) {
                    jQuery(this).delay(100 * i).fadeIn(500);
                });
            }
        });
        
        jQuery("#menu-main-menu-mobile").children("li.menu-item-has-children").each(function(){
            var thismn = jQuery(this);
            
            thismn.children("a").on("click", function(e){
                e.preventDefault();

                jQuery("#navigation").find(".sub-menu.open").removeClass("open");
                thismn.children(".sub-menu").addClass("open");
                jQuery(".scwmobilemenu_head").html('<i class="fa fa-chevron-left"></i> Back');
                
                thismn.parent("ul").addClass("opensubmenu opensubmenu_level1");
                
                jQuery("#menu-main-menu-mobile").children("li").each(function(i) {
                    jQuery(this).children("a").delay(100 * i).animate({
                        left: -50,
                        opacity: 0
                    }, 500);
                });
                thismn.children(".sub-menu").children("li:not(.menu-item-object-ubermenu-custom)").each(function(i) {
                    jQuery(this).delay(200 * i).fadeIn(1000);
                });
            });
            
            thismn.find("li.menu-item-has-children").each(function(){
                var thismnlv2 = jQuery(this);
                
                thismnlv2.children("a").click(function(e){
                    e.preventDefault();
                    
                    thismnlv2.children(".sub-menu").addClass("open");
                    thismnlv2.parent("ul").addClass("opensubmenu opensubmenu_level2");
                    
                    jQuery(".opensubmenu_level2").children("li").each(function(i) {
                        jQuery(this).children("a").delay(100 * i).animate({
                            left: -50,
                            opacity: 0
                        }, 500);
                    });
                    thismnlv2.children(".sub-menu").children("li:not(.menu-item-object-ubermenu-custom)").each(function(i) {
                        jQuery(this).delay(200 * i).fadeIn(1000);
                    });
                });
            });
        });
        
        jQuery(".scwmobilemenu_head").click(function(){
            if(jQuery(".opensubmenu").length > 1){
                jQuery(".opensubmenu_level2").find(".sub-menu.open").children("li").fadeOut();
                jQuery(".opensubmenu_level2").children("li").each(function(i) {
                    jQuery(this).children("a").delay(100 * i).animate({
                        left: 0,
                        opacity: 1
                    }, 500);
                });
                
                jQuery(".opensubmenu_level2").find(".sub-menu.open").removeClass("open");
                jQuery(".opensubmenu_level2").removeClass("opensubmenu").removeClass("opensubmenu_level2");
            }else{
                jQuery(".opensubmenu_level1").find(".sub-menu.open").children("li").fadeOut();
                jQuery("#menu-main-menu-mobile").children("li").each(function(i) {
                    jQuery(this).children("a").delay(100 * i).animate({
                        left: 0,
                        opacity: 1
                    }, 500);
                });
                
                jQuery(".opensubmenu_level1").find(".sub-menu.open").removeClass("open");
                jQuery(".opensubmenu_level1").removeClass("open").removeClass("opensubmenu").removeClass("opensubmenu_level1");
                jQuery(this).html('Menu');
            }
        });
    });

请帮忙，谢谢

我正在重写 jQuery 的.val()函数，以便当我设置元素的值时select我可以自动触发更改事件。

getter 和 setter 代码运行正常，但是当$('select').val()控制台输出Getter两次时。我认为这不应该发生，所以有人知道哪里出了问题吗？

这是一个 jsfiddle：https://jsfiddle.net/41hxsam9/1/

const originalVal = $.fn.val;

$.fn.extend( {
    val: function() {
        if ( arguments.length > 0 ) {
            if ( this.hasClass( 'myselect' ) ) {
                console.log( 'Setter' );
                const result = originalVal.apply( this, arguments );
                this.trigger( 'change' );
                return result;
            }
        }
        console.log( 'Getter' );
        return originalVal.apply( this, arguments );
    }
} );

我不熟悉 JQuery。我需要设置一个条件，并且尝试了各种放置if语句的地方，但似乎都不起作用。

我想测试下面的代码是否输出“少于一分钟”，如果是，则写入“ <1 分钟”。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reading-time/2.0.0/readingTime.min.js"></script>
<script>
  (function($) {
    $(document).ready(function() {
      $('.et_pb_post_content').readingTime({
        readingTimeTarget: $('.eta'),
        wordCountTarget: $('.word-count'),
        wordsPerMinute: 275,
        lang: 'en',
      });
    });
  })(jQuery);
</script>

<div class="et_pb_post_content">Here is some content</div>

Word count: <span class="word-count"></span>. Reading time: <span class="eta"></span>

有谁知道为什么：

$(window).is(window)

返回false

我（和所有 AI）认为应该是真的，至少如果你使用非窗口元素它会返回 true。

我是 Chart.js 的新手，正在尝试显示一个条形图，其中的数据使用 jquery 的 AJAX 调用来调用包含存储数据的 mysql 查询的 PHP 文件。

应该显示图表的页面仅显示 X 轴和 Y 轴，但没有显示图表，即使存在我从 Ajax 调用中获得的数组。

我已经花了 5 天时间修修补补，我觉得是时候放弃并四处打听了，

HTML 页面

<!DOCTYPE html>
<html>
<head>
  <title>Chart.js Sample</title>
  <script type="text/javascript" src="chart.umd.js"></script>
  <script type="text/javascript" src="jquery-3.6.0.min.js"></script>
  <style type="text/css">
    #myChart {
      min-width: 100px;
      max-width: 500px;
      min-height: 200px;
      max-height: 400px;
    }
  </style>
</head>
<body>
  <canvas id="myChart"></canvas>

  <script type="text/javascript">
    var chData = [];

    $(document).ready(function(){

      $.ajax({
        url: "ajax.php",
        method: "GET",
        dataType: "JSON",
        contentType: "application/json; charset=utf-8",
        success: function(data) {
          chData = data;
        }
      });

      var chartId = new Chart($("#myChart"), {
         type: 'bar',
         data: {
            labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY"],
            datasets: [{
               label: "Subjects",
               data: chData
            }]
         }
      });

    });
  </script>
</body>
</html>

AJAX 页面：

<?php

$conn = mysqli_connect("localhost", "root", "mypass", "chart") or die("Mysql Error Connect: ".mysqli_error());

  $arr = [];

  $q = mysqli_query($conn, "SELECT score FROM score");
  if(mysqli_num_rows($q)>0) {
    while($x = mysqli_fetch_array($q)) {
      $score = $x["score"];
      array_push($arr, $score);
    }
  }
  
  header('Content-type: application/json');
  echo json_encode($arr);

?>

如果你运行代码，并在开发人员选项中打开控制台，你会发现 JSON 数组已经存在：

chData
(5) ['44', '35', '22', '28', '73']

有人能指出我哪里做错了吗？感谢您的时间和帮助

我的 HTML 代码是：

<select id="block-permissions" name="permissions" multiple="multiple">
    {{-- <option value="0">Topic 0</option> When uncomment works fine! --}}
</select>

我的 JS 代码是：

    $(function() {
            // const permissions = @json($permissions)
            //
            const permissions = {
                results: [{
                    text: "Group 1",
                    children: [{
                            id: 1,
                            text: "Topic 1",
                            selected: true
                        },
                        {
                            id: 2,
                            text: "Topic 2",
                            selected: true
                        },
                        {
                            id: 3,
                            text: "Topic 3",
                            selected: false
                        }
                    ]
                }]
            }

            $('#block-permissions').select2({
                data: permissions,
            })
        })

Select2 控件仅适用于主题 0（预定义 HTML 数据），但完全忽略 JS 数据。

怎么了？

我有这个代码：

$(document).keyup( function(e) {
  console.log($(this).attr('id'));
});

当在 HTML 输入标签中输入带有 id 的内容时，console.log 中的输出为：

undefined

那么如何在 keyup 函数中使用 $(this)？

我有一个这样的表格：

<form name="filter">

  <input type='number'>
  <input type="text">
  <input type="range">

</form>

我想获取我使用的输入类型，但没有成功

$(document).on('input', 'form[name="filter"]', function () { 
     alert(this.type); // alerts undefined
});

根据我使用的输入，我期望出现类似以下的警报：数字、文本或范围，但我得到的是“未定义”我做错了什么？

我刚开始学习 React，正在 Next.js 中构建一个网站，但我对基础知识还不是很了解。
我是一名网页设计师和 CSS 开发人员，我使用 jQuery 已有 10 年，主要用于在点击、悬停等情况下切换元素上的类。现在我想在 React 中做同样的事情，但它不像 jQuery 那样简单，我就是无法理解它，因为它对我来说有点太合乎逻辑了。
以下是一个例子：一次只打开一个手风琴面板：

$(".panel").on("click", function() {
  $(".panel").not($(this)).removeClass("open")
  $(this).toggleClass("open")
})

.accordion {
  max-width: 300px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: Arial, sans-serif;
}

.panel {
  width: 100%;
  border: 1px solid black;
  cursor: pointer;
  margin-bottom: 10px;
}

.panel h6 {
  font-size: 14px;
  margin: 0;
  padding: 10px;
  background: wheat;
}

.panel p {
  font-size: 0;
  padding: 0 10px;
  margin: 0;
  transition: all 0.3s linear;
}

.panel.open p {
  font-size: 14px;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="accordion">
  <div class="panel">
    <h6>Panel One</h6>
    <p>Lorem ipsum dolor sit amet</p>
  </div>
  <div class="panel">
    <h6>Panel Two</h6>
    <p>Lorem ipsum dolor sit amet</p>
  </div>
  <div class="panel">
    <h6>Panel Three</h6>
    <p>Lorem ipsum dolor sit amet</p>
  </div>
</div>

只需 3 行 JS，就大功告成了。现在我想在 React 中做同样的事情，但不知道如何做。我的尝试：

import { useState } from "react"

export default function Accordion() {
    const [isActive, setIsActive] = useState(false)
    let classNames = 'panel ' + (isActive ? 'active' : '')

    function handleClick() {
        setIsActive(!isActive)
    }
    
    return (
        <div className="accordion">
            <Panel className={classNames} onClick={handleClick}>
                <h6>Panel One</h6>
                <p>Lorem Ipsum Dolor Sit Amet</p>
            </Panel>
            <Panel className={classNames} onClick={handleClick}>
                <h6>Panel Two</h6>
                <p>Lorem Ipsum Dolor Sit Amet</p>
            </Panel>
            <Panel className={classNames} onClick={handleClick}>
                <h6>Panel Three</h6>
                <p>Lorem Ipsum Dolor Sit Amet</p>
            </Panel>
        </div>
    )
}

function Panel({ children, className, onClick }) {
    return (
        <div className={className} onClick={onClick}>
            {children}
        </div>
    )
}

但是它效果不太好，当我单击面板时，所有面板都会一起打开/关闭。
所有在线教程都使用.map()，但理想情况下我想避免使用它。
我知道在 React 中useState会触发重新渲染，但useRef()事实并非如此，所以我想我可以将它们结合起来，但话又说回来，这不是我能做到的panel.current.toggleClass('open')，所以我不知道。TLDR

：有人能帮助我理解 React 的基础知识吗，特别是如何在单击时“翻译”jQuery 函数$(element).not($(this)).removeClass(class); $(this).toggleClass(class)？

我希望能够获取 base64 编码的 url 字符串并从 jquery 中的名称和描述符参数值。

我让它处理未经 base64 编码的参数，方法是将 url 字符串作为数组获取，然后提取 2 个参数（名称和描述符）的值 - 但是当我对 url 中的参数进行 base64 编码时，我可以解码字符串，但它返回的是字符串而不是数组，所以我无法提取名称和描述符参数的值。

因此 url 将是https://example.com?name=fred&descriptor=Boss并编码为 base64 https://example.com?P25hbWU9ZnJlZCZkZXNjcmlwdG9yPUJvc3M=

那么从https://example.com?P25hbWU9ZnJlZCZkZXNjcmlwdG9yPUJvc3M=我如何在 jquery 中获取名称和描述符的值并将它们设置为变量？

也许更容易不从解码版本中获取数组，而只使用 jquery 获取“+”atob 解码后的值？