对将 JS 变量插入 Jquery 感到困惑

Posted 2023-05-08

【中文标题】对将 JS 变量插入 Jquery 感到困惑

【英文标题】：Confused about inserting a JS variable into Jquery

【发布时间】：2022-01-20 19:45:01

【问题描述】：

我想滚动到我的 html 表格中的某一行，其中包含格式为

的日期

Nov-17-2021

目前，我有这个 date.js 函数，它获取今天的日期并将其输入到 <span>

const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
  "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
];

const d = new Date();

var today = new Date();

var date = today.getDate() + '-' + monthNames[d.getMonth()] + '-' + today.getFullYear();

document.getElementById("date").innerHTML = date;

我发现我可以使用 JQuery 轻松滚动到页面中的某些文本

function anotherFunction() 
    $(window).scrollTop($("table:contains('some text'):last").offset().top);

如何使用 javascript 代码中的变量 date 使用 JQuery 滚动到表格中的此文本？本质上，我想要一个在我的表格中跳转到今天日期的按钮。

我很确定也有更好的方法可以做到这一点，但我是编程的绝对初学者，我知道的不多，所以很抱歉直言不讳，谢谢！

【问题讨论】：

您的日期格式与Nov-17-2021 与17-Nov-2021 提供的文本不匹配，因此除非您进行日期解析，否则它们将不匹配。

【参考方案1】：

您是否尝试过在字符串中包含日期？

function anotherFunction() 
    date = document.getElementById("date").innerHTML
    $(window).scrollTop($(`table:contains($date):last`).offset().top);

【参考方案2】：

您可以使用字符串连接或字符串文字添加日期字符串。

"table:contains(" + date +"):last"
`table:contains($date):last`

例子：

// Fix a date for demo
var date = "18-Dec-2021"

$("button").click(() => 
  $(window).scrollTop($("tr:contains('" + date + "'):last").offset().top);
);

td  height: 200px; border: 1px solid #CCC; 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>click me</button>
<table>
  <tbody>
    <tr><td>01-Dec-2021</td></tr>
    <tr><td>10-Dec-2021</td></tr>
    <tr><td>18-Dec-2021</td></tr>
    <tr><td>31-Dec-2021</td></tr>
  </tbody>
</table>

【参考方案3】：

您的函数anotherFunction 用于滚动到具有文本'some text' 的表格内的元素。

您只需要使用文本的一些动态参数触发函数anotherFunction。

下面是它的完成方式。

function firstFunction() 
    const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
        "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
    ];
    const d = new Date();
    var today = new Date();
    var date = today.getDate() + '-' + monthNames[d.getMonth()] + '-' + today.getFullYear();
    document.getElementById("date").innerHTML = date;
    anotherFunction(date)


function anotherFunction(text) 
    $(window).scrollTop($(`table:contains($text):last`).offset().top);

table 
    margin-bottom: 100vh;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<table>
    <tr>
        <th>Scroll to bottom and click the button</th>
    </tr>
    <tr>
        <td id="date">Your Date Will Appear here</td>
    </tr>
</table>
<button onclick="firstFunction()">Call First Function</button>