Javascript:希望 'this.title' 成为 DOM 元素的标题，而不是窗口-6ren

Javascript:希望 'this.title' 成为 DOM 元素的标题，而不是窗口

转载作者：行者123 更新时间：2023-12-02 22:12:48

我最近问过this question 。我获得了 a jsFiddle solution ...这适用于 jsFiddle，但不适用于我的代码。不幸的是，当我运行代码(使用 Visual Studio 2019 - .NET Core 3 网站)时，this.title value 返回页面标题中的任何值，而不是 DOM 元素。我已经在 Edge 和 Chrome 中运行了这个，结果相同。

在我的布局页面中，我有所有脚本:

<script type="text/javascript" src="~/Content/Scripts/rightClick.js"></script>
<script type="text/javascript" src="~/Content/Scripts/OpenTargetWindow.js"></script>
<script type="text/javascript" src="~/Content/Scripts/SetDefinitions.js"></script>
<script type="text/javascript" src="~/Content/Scripts/SearchApplicants.js"></script> <!--This is the script with the code in question -->

SearchApplicants.js 中的代码是:

$(function () {
    $('.searchLetters').on('click', function () { addClickedLetter(this.title); });
});

function addClickedLetter(letter) {
    searchString = $("#txtSearchLastName").val() + letter;
    $("#txtSearchLastName").val(searchString);
};

我什至尝试将该脚本代码直接放入布局页面(而不是引用脚本)，但它仍然有 this.title作为 <title></title> 的值元素，而不是我想要的链接元素。

不幸的是，该问题已关闭，我无法获得有关该问题的进一步答案或评论。该代码按照我想要的方式添加 onclick 函数，现在的问题是 this.title作为每个链接元素的标题而不是页面的标题。

更新

这是完整呈现的 HTML:

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Test</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
            integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
            crossorigin="anonymous"></script>
    <link href="~/Content/Styles/site.css" rel="stylesheet" />
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/redmond/jquery-ui.css">
    <script type="text/javascript" src="~/Content/Scripts/rightClick.js"></script>
    <script type="text/javascript" src="~/Content/Scripts/OpenTargetWindow.js"></script>
    <script type="text/javascript" src="~/Content/Scripts/SetDefinitions.js"></script>
    <script type="text/javascript" src="~/Content/Scripts/SearchApplicants.js"></script>
    <script>
        $(function () {
            $(document).tooltip();
        });
    </script>
</head>
<body class="style1">
    <img id="banner" src="~/Content/Images/Banner.jpg" alt="Need to put something here..." />
    <form id="masterForm">
        <div>
            <table class="style1" summary="This table is for formatting purposes only.">
                <tr>
                    <td colspan="2">
                        <h2>This is for a title...</h2>
                        <hr />
                    </td>
                </tr>
                <tr>
                    <td style="width:15%" valign="top">
                        <table summary="This table is for formatting purposes only.">
                            <tr>
                                <td style="background-color:#C0C0C0">
                                    <a asp-controller="Search" asp-action="Index" accesskey="A"><u>A</u>liens</a>
                                </td>
                            </tr>
                            <tr>
                                <td style="background-color:#C0C0C0">
                                    <a asp-controller="Search" asp-action="Cowboys" accesskey="C"><u>C</u>owboys</a>
                                </td>
                            </tr>
                            <tr>
                                <td style="background-color:#C0C0C0">
                                    <a asp-controller="Search" asp-action="ET" accesskey="E"><u>E</u>.T.</a>
                                </td>
                            </tr>
                            <tr>
                                <td style="background-color:#C0C0C0">
                                    <a asp-controller="Home" asp-action="Logout" accesskey="L"><u>L</u>ogout</a>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td>
                        <label id="lblTitle" style="font-weight:bold;">Alien Search Page</label>
                        <br />
                        <br />
                        <a id="addAToSearch" class="searchLetters" title="A" accesskey="A">A</a>
                        <a id="addBToSearch" class="searchLetters" title="B" accesskey="B">B</a>
                        <a id="addCToSearch" class="searchLetters" title="C" accesskey="C">C</a>
                        <a id="addDToSearch" class="searchLetters" title="D" accesskey="D">D</a>
                        <a id="addEToSearch" class="searchLetters" title="E" accesskey="E">E</a>
                        <a id="addFToSearch" class="searchLetters" title="F" accesskey="F">F</a>
                        <a id="addGToSearch" class="searchLetters" title="G" accesskey="G">G</a>
                        <a id="addHToSearch" class="searchLetters" title="H" accesskey="H">H</a>
                        <a id="addIToSearch" class="searchLetters" title="I" accesskey="I">I</a>
                        <a id="addJToSearch" class="searchLetters" title="J" accesskey="J">J</a>
                        <a id="addKToSearch" class="searchLetters" title="K" accesskey="K">K</a>
                        <a id="addLToSearch" class="searchLetters" title="L" accesskey="L">L</a>
                        <a id="addMToSearch" class="searchLetters" title="M" accesskey="M">M</a>
                        <a id="addNToSearch" class="searchLetters" title="N" accesskey="N">N</a>
                        <a id="addOToSearch" class="searchLetters" title="O" accesskey="O">O</a>
                        <a id="addPToSearch" class="searchLetters" title="P" accesskey="P">P</a>
                        <a id="addQToSearch" class="searchLetters" title="Q" accesskey="Q">Q</a>
                        <a id="addRToSearch" class="searchLetters" title="R" accesskey="R">R</a>
                        <a id="addSToSearch" class="searchLetters" title="S" accesskey="S">S</a>
                        <a id="addTToSearch" class="searchLetters" title="T" accesskey="T">T</a>
                        <a id="addUToSearch" class="searchLetters" title="U" accesskey="U">U</a>
                        <a id="addVToSearch" class="searchLetters" title="V" accesskey="V">V</a>
                        <a id="addWToSearch" class="searchLetters" title="W" accesskey="W">W</a>
                        <a id="addXToSearch" class="searchLetters" title="X" accesskey="X">X</a>
                        <a id="addYToSearch" class="searchLetters" title="Y" accesskey="Y">Y</a>
                        <a id="addZToSearch" class="searchLetters" title="Z" accesskey="Z">Z</a>
                        <br />
                        <label id="lblSearchLastName" for="txtSearchLastName" accesskey="N">Last Name:&nbsp;</label>
                        <input id="txtSearchLastName" type="text" tabindex="1" maxlength="23" class="uppercase" readonly />
                        <button id="btnClear" tabindex="27" title="Clear" accesskey="C">Clear</button>
                        <button id="btnList" tabindex="28" title="Show List" accesskey="S">Show List</button>
                        <hr />
                    </td>
                </tr>
            </table>
            <br /><br />
            <div>
                Some text goes here...
            </div>
            <br />
        </div>
    </form>
</body>
</html>

这是 rightClick.js 中的内容:

//******************************************************************************
// Module  :   rightClick.js
//******************************************************************************

var BM = 2; // button middle
var BR = 3; // button right
var msg = "Mouse right-click is not supported on this page.";

function mouseDown(e) {
    try { if (event.button == BM || event.button == BR) { return false; } }
    catch (e) { if (e.which == BR) { return false; } }
}
document.oncontextmenu = function () { alert(msg); return false; }
document.ondragstart = function () { alert(msg); return false; }
document.onmousedown = mouseDown;
//******************************************************************************

以下是 OpenTargetWindow.js 中的内容:

function openTargetWindow(form, windowName) { var features; var PWfeatures; var sWidth = 778; var sHeight = 580; var PWWidth = 386; var PWHeight = 255; var PWCenterLeft = (screen.width / 2 - PWWidth / 2); var PWCenterTop = (screen.height / 2 - PWHeight / 2); var is_NN = (navigator.appName.indexOf('Netscape') != -1); var is_IE = (((navigator.userAgent.indexOf('MSIE') != -1) || (navigator.userAgent.indexOf('opera') == -1)) && (!is_NN)); if (is_IE) { features = 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,screenX=0,top=20,left=14'; features += ',height=' + sHeight + ',width=' + sWidth; PWfeatures = 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,screenX=0,top=' + PWCenterTop + ',left=' + PWCenterLeft + ''; PWfeatures += ',height=' + PWHeight + ',width=' + PWWidth; } else { features = 'toolbar=no,menubar=no,scrollbars=yes,location=no,border=yes,status=yes,screenX=0,top=20,left=5,autocomplete=no,frameborder=no,directories=no'; PWfeatures = 'toolbar=no,menubar=no,scrollbars=yes,location=no,border=yes,status=no,screenX=0,top=' + PWCenterTop + ',left=' + PWCenterLeft + ',autocomplete=no,frameborder=no,directories=no'; if (window.screen) { features += ',height=' + sHeight + ',width=' + sWidth; PWfeatures += ',height=' + PWHeight + ',width=' + PWWidth + ''; } else { if (window.all) { features += ',fullscreen=yes'; } else { features += ',height=480,width=640'; } } } var main = open(form, windowName, features); }

rightClick.js 和 OpenTargetWindow.js 都是从以前的应用程序复制的。

这是 SetDefinitions.js 中的内容:

$(function () {

    function setDefinitionTitle(className, defintion) {
        var childElements = document.getElementsByClassName(className);

        for (i = 0; i < childElements.length; ++i) {
            var ele = childElements[i];
            ele.setAttribute('title', defintion);
        }
    };

    function setDefinition1() {
        setDefinitionTitle('def1', 'The first definition...');
    }

    function setDefinition2() {
        setDefinitionTitle('def2', 'The second definition...');
    }

    function setDefinition3() {
        setDefinitionTitle('def3', 'The third definition...');
    }

    function setDefinition4() {
        setDefinitionTitle('def4', 'The fourth definition...');
    }

    setDefinition1();
    setDefinition2();
    setDefinition3();
    setDefinition4();
});

最后，这是 SearchApplicants.js 中的内容:

$(function () {
    $('.searchLetters').on('click', function () { addClickedLetter(this.title); });
});

function addClickedLetter(letter) {
    searchString = $("#txtSearchLastName").val() + letter;
    $("#txtSearchLastName").val(searchString);
};

最佳答案

也许你可以尝试这样的事情:

$(function () {
    $('.searchLetters').on('click', function (e) { addClickedLetter(e.currentTarget.value); });
});

关于Javascript:希望 'this.title' 成为 DOM 元素的标题，而不是窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59504281/

文章推荐： javascript - 有没有办法在 GTM 的循环内使用查找列表？

文章推荐： javascript - 使用单选按钮进行计算

javascript - 通过标题覆盖 <title>TITLE</title>
有什么方法可以覆盖无法直接编辑的页面标题，只能在页眉中添加 Javascript？我不能直接编辑的行是: Title of the page 我能想到的解决这个问题的唯一方法是在我可以通过我的门户后
django - <title> {% block title %} Home {% endblock %} </title> 没有被其他页面覆盖？
这是我的基础文件 {% load static %} {% include "feed/header.html" %} {% block content%} {% endblock %} {% inc
html - <meta name ="title"> 标签和 <title></title> 标签的区别
请说明之间有什么区别标记和标签。 Page title 如果两者都使用，哪个最优先？我观察到一些网站同时具有和 tags 和两者相同，这是预期的，请确认？如果我们不使用标签标题，我
mysql - 从另一个表 `title`引用 `title`
我有一个带有唯一title的表_primary，并且我有一个需要设置引用title的表_secondary > 对于 _primary 表。最佳答案尝试这个解决方案并让我知道它对您有用。 ALTE
php - PDO 数据库访问 WHERE title = $title
我正在尝试学习使用 PDO 而不是 MySQLi 进行数据库访问，但我在从数据库中选择数据时遇到了问题。我想使用: $STH = $DBH->query('SELECT * FROM ratings
title - 关于 title/alt 属性
我了解 title 和 alt 属性的用途，但我只是不了解它们的最佳用途，或者我是否可以使用相同的 title /alt 不止一次。例如，以一个关于狗的网站为例: 根据我的理解，所有 img 标签都
iphone - UITabBarItem.title 与 UINavigationController.title
我分配了一个带有标题 (initWithTitle) 的 UITabBarItem 并将其连接到 UINavigationController。我发现，如果导航 Controller 的 Root
iphone - 如何做到 tabBar.title != navBar.title ？
我有标签栏和导航栏。在导航栏中我有表格 View 。问题是，当我在 IB 中将标题设置为选项卡栏，然后在 TableView 中设置标题时，选项卡栏标题将更改为 TableView 中的标题，并且我在
java - jsp中 "<%=TITLE %> "和 "${TITLE} "有什么不同？
在我的 JSP 页面中，我使用显示页面标题，有时可以，但有时页面显示无法cpmplie代码。所以我将代码更改为 ${TITLE} ，也可以。有什么不同和${TITLE}在jsp中？这是我的页
pug - 如何在 Jade 中将自定义字符串附加到 "title= title"？
我目前正在向 Jade 和 node.js 介绍自己由于我想避免冗余，我想到将域名附加到当前标题，例如Blog | example.com 我的 Jade 模板得到了 Blog通过 Node.js
java - 帮助我了解 title.compareTo(a.title()); 的幕后花絮内码
//Sorting userDefined object from ArrayList<>... import java.io.*; import java.util.*; class Song
html - "og:title"的元标记是否使 "title"的元标记变得多余？
我的网站有这两个元标记，它们目前具有相同的值: 第二个是 facebook 连接所需的格式。这是否意味着第一个是多余的并且可以删除？最佳答案最好同时存在这两个标签。该标签告诉搜索引擎有
asp.net-mvc - View.Title == ViewData ["Title"]
我现在对 ASP.NET MVC 的 Razor ViewEngine 感到困惑。大多数人会说: View.Title 与相同 ViewData["Title"] 运行应用程序后我得到了这个 Com
iphone - self.title 与 self.navigationItem.title
UIViewController 的 title 属性的用途是什么，不能用 navigationItem.title 设置标题吗？两者似乎都有效，我只是想知道为什么会有这种看似重复的功能。最佳答案
javascript - {props.props.title}？为什么不是 {props.title}？
我仍在学习如何将 API 数据与 react 和 nextjs 一起使用。但是，为什么我的函数只在我编写 {props.props.title} 而不是我期望的 {props.title} 时起作用？
regex - 正则表达式匹配<title> ，包括任意位置的换行符
我正在尝试编写一个从URL提取的正则表达式，但是问题是“。”与我们已经知道的不匹配换行符。如何编写正则表达式以匹配和提取pageTitle(。*？)，但换行符可能介于我在用grails。最佳答案
javascript - {props.props.title}？为什么不是 {props.title}？
我仍在学习如何将 API 数据与 react 和 nextjs 一起使用。但是，为什么我的函数只在我编写 {props.props.title} 而不是我期望的 {props.title} 时起作用？
github - 潘多克 : set document title to first title
我正在 github 上创建一个库，所以我为此使用了一个 Markdown 文件，其结构如下: # My main title ## My first section ... ## My second
javascript - {`${props.title} ` } 和 {props.title} 之间的区别
我在某些地方看到，为了从 props 中获取 title 的值，我们使用 {`${props.title} `} 而在其他一些地方，我们使用它 {props.title} 有什么区别？最佳答案第一
css - 图像的自动标题不起作用 : img[title]:after{content:attr(title);}
我想使用 IMG 标签的 TITLE 属性，为图像创建标题: HTML CSS img[title]:after{content:attr(title);} 但是无论是在 IE、Firefox 还是

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

Javascript:希望 'this.title' 成为 DOM 元素的标题，而不是窗口

更新