主页 / coding / 问题

问题[jquery](coding)

Martin Hope
Electricow
Asked: 2025-01-10 00:58:57 +0800 CST
  • 6

我是 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']

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

jquery
Martin Hope
vbulash
Asked: 2025-01-07 21:13:49 +0800 CST
  • 5

我的 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 数据。

怎么了？

jquery
Martin Hope
Cymro
Asked: 2025-01-03 00:46:16 +0800 CST
  • 6

我有这个代码：

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

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

undefined

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

jquery
Martin Hope
Jack Maessen
Asked: 2024-12-30 18:00:19 +0800 CST
  • 5

我有一个这样的表格：

<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
});

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

jquery
Martin Hope
ollylove
Asked: 2024-12-24 23:57:51 +0800 CST
  • 5

我刚开始学习 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)？

jquery
Martin Hope
dubbs
Asked: 2024-11-27 22:40:53 +0800 CST
  • 5

我希望能够获取 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 解码后的值？

jquery
Martin Hope
Dan Lindley
Asked: 2024-11-23 19:01:23 +0800 CST
  • 6

我是 jquery 的新手，有一个药物计算器。计算器中的值可以由用户定义，并且按预期工作。但是，我尝试使用下拉列表（SQL 查询驱动）填充字段作为替代选项。

下拉菜单

        <select name="stock_item_used" name="stock_item_used" id="stock_item_used" required>
        <option value="" disabled selected>Medication</option>
        <?php
        //Find medications
        $stmt = $conn->prepare("SELECT * from rescue_medication_trans
        LEFT JOIN rescue_medications ON rescue_medication_trans.med_profile_id = rescue_medications.medication_id
        LEFT JOIN rescue_stock_medication ON rescue_stock_medication.medication = rescue_medication_trans.med_profile_id
        WHERE rescue_medication_trans.centre_id = :centre_id
        ORDER BY common_name ASC");
        $stmt->bindParam(':centre_id', $centre_id, PDO::PARAM_INT);     
        // initialise an array for the results
        $instock = array();
        $stmt->execute();
        while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {

        $med_profile_id = $row["med_profile_id"];
        $batch_number = $row["batch_number"];
        $expiry = $row["expiry"];
        $med_common_name = $row["common_name"];
        $mcd = $row["concentration_dose"];
        $mcv = $row["concentration_volume"];
        $dose_type = $row["concentration_dose_type"];
        $volume_type = $row["concentration_volume_type"];

        //format the exp date
        $exp = new DateTime($expiry);
        $exp = $exp->format('d-m-Y');
                                            
print '<option value="' . $med_profile_id . '" data-dose="' . $mcd . '" data-volume="' . $mcv . '">' . $med_common_name . ' - ' . $mcd . '<i>' . $dose_type . '</i>  in ' . $mcv . '<i>' . $volume_type. '</i> (' . $batch_number . ' exp: ' . $exp . ') </option>'; } ?> </select>

jquery 脚本

    <script>
    
var req_dose = 0;
var med_dose = 0;
var med_vol = 0;
var weight = 0;

$("#required_dose").change( function(){
    req_dose = $("#required_dose").val();
    calcTotals();
});
$("#medication_dose").change( function() {
    med_dose = $("#medication_dose").val();
    calcTotals();
});
$("#medication_volume").change( function() {
    med_vol = $("#medication_volume").val();
    calcTotals();
});
$("#animal_weight").change( function() {
    weight = $("#animal_weight").val();
    calcByweight();
});

var selectdose = document.getElementById("stock_item_used");
selectdose.addEventListener("change", function() {
  var optiondose = selectdose.options[selectdose.selectedIndex].getAttribute("data-dose");
  document.getElementById('medication_dose').value = optiondose;
  calcTotals();
  calcByweight();
});

var selectvol = document.getElementById("stock_item_used");
selectvol.addEventListener("change", function() {
  var optionvol = selectvol.options[selectvol.selectedIndex].getAttribute("data-volume");
  document.getElementById('medication_volume').value = optionvol;
  calcTotals();
  calcByweight();
});

function calcTotals(){
    $("#volume").text(req_dose * (med_vol / med_dose));
}
function calcByweight(){
    $("#perweight").text((req_dose * (med_vol / med_dose)) * weight);
}
</script>

行为

表格填充后，我在填充后添加了 calctotals() 以查看它是否会计算表格，但是我一直得到 NaN 或 Infinity。

如果我编辑表单字段，计算器将再次工作，但这违背了从下拉列表中填充的意义。

jquery
Martin Hope
user20408154
Asked: 2024-11-10 22:44:27 +0800 CST
  • 5

我正在使用 ASP.NET Core 6。我有一个 Razor 视图，其中有一个由 Ajax 调用填充的部分：

 <div id="assessmentTablesDiv">
     <!-- ...content... -->
 </div>

这<div>是通过以下调用填充的：

var assessmentTablesDiv = $('#assessmentTablesDiv');
var id = $('#adminDetailsAndOverviewId').val();

$.ajax({
      url: "@Url.Action("LoadAssessmentTables", "Assessments")",
      data: { id:id },
      type: "GET",
          success: function (data) {
          assessmentTablesDiv.replaceWith(data);
      }
});

<div>被一个带有调用模态表单的按钮的部分视图所取代。

</div>
<div class="row">
    <div class="col-md-12 mb-2 mt-2">
        <button type="button" class="btn-sm btn-primary float-right"
                data-toggle="ajax-modal" data-target="#mdAddAssessment"
                data-url="@Url.Action("Create", "Assessments")"
                title="Click add an assessment.">
        Add Assessment
        </button>
    </div>
</div>

当我按下模式表单上的保存按钮时，数据被保存，模式关闭。然后我想运行 Ajax 调用来替换数据以assessmentTablesDiv显示新保存的数据。

我尝试了以下代码，但它不起作用：

$("#btnSave").on('click', function (event) {

    if (validate()) {
        var viewModel = {
            "AssessmentId": $('#assessmentId').val(),
            "AdmissionDetailsAndReviewsId": $('#adminDetailsAndReviewsId').val(),
            "AssessmentTypeId": $('#AssessmentSelectionId').val(),
            "DateMostRecent": $('#dateMostRecent').val(),
            "IQSpecifyOrOther": $("#iqSpecifyOrOther").val(),
            "Score": $('#score').val(),
        }

        $.ajax({
            type: "POST",
            url: "@Url.Action("SaveGeneralAssessment", "Assessments")",
            headers: { "RequestVerificationToken": "@GetAntiXsrfRequestToken()" },
            datatype: "json",
            data: viewModel,
            async: false,
            success: function (response) {
                $('#mdAddAssessment').modal('hide')
                reloadAssessment();
            },
            failure: function (response) {
                alert(JSON.stringify(response));
            },
            error: function (response) {
                alert(JSON.stringify(response));
            }
        });
    };
});

function reloadAssessment() {
    var assessmentTablesDiv = $('#assessmentTablesDiv');
    var id = $('#adminDetailsAndOverviewId').val();

    $.ajax({
        url: "@Url.Action("LoadAssessmentTables", "Assessments")",
        data: { id: id },
        type: "GET",
        success: function (data) {
            assessmentTablesDiv.replaceWith(data);
        }
    });
}

我不想重新加载整个页面，因为页面上输入的任何其他未保存的数据都将丢失。

有什么想法吗？

谢谢

jquery
Martin Hope
bbunlock
Asked: 2024-11-03 04:50:01 +0800 CST
  • 6

我很少发帖，因为我通常可以找到答案，但我已经搜索了几个小时，我的头感觉好像要爆裂了……无论如何

我正在寻找获取 css 元素“桌面”版本的 css 值，但我不需要 @media/responsive 值，例如

.my-css {

  font-weight: 400; /* Desktop version */

}

@media only screen and (max-width: 724px) {

    .my-css {

      font-weight: 200; /* responsive version */

    }
}

现在我希望我的 jquery 获取桌面版本而不是响应版本，因此即使响应版本是当前屏幕版本，我仍然想要桌面版本的值，所以

var FontWeight = $('.my-css').css('font-weight'); /* 400 NOT 200 */

有办法吗？

先感谢您

jquery
Martin Hope
Jason Bourne
Asked: 2024-10-24 07:38:31 +0800 CST
  • 5

我在 oracle apex 中有一个交互式网格区域，我希望能够通过位于工具栏最右侧的切换按钮将其最大化。切换按钮本身的自定义相对简单，但我正在努力实现最大化功能。我包含了目前位于交互式网格的“初始化 JavaScript 函数”部分中的代码。

function(config) {
    let $           = apex.jQuery,
    toolbarData     = $.apex.interactiveGrid.copyDefaultToolbar(),
    toolbarGroup    = toolbarData.toolbarFind("actions4");

    toolbarGroup.controls.push(
        {
            type: "TOGGLE",
            action: "maximize-region",
            icon: "fa fa-expand"
        }
    );

    config.initActions = function(actions){
        actions.add({
            name: "maximize-region",
            maximize: false,  
            set: function(maximize) {
                this.maximize = maximize;
                //jQuery to maximize the region would go here
            }, get: function() {
                return this.maximize;
            }
        });
    }

    config.toolbarData = toolbarData;
    return config;

}

任何帮助都将不胜感激！

jquery