"/>

如何获取所选图像映射alt值?(How to get selected image map alt value?)

确定改变了我的代码:

      <div class="a" id="mySidenav">
         <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">X</a>
         <a href="#" id="tname">Number:</a>
         <a href="#" id="d1"></a>
         <a href="#" id="d2"></a>
      </div>
      <map class="b" name="mymap" id="map">
         <area shape="circle" coords="67,420,20" onclick="openNav(this)" alt="5" />
         <area shape="circle" coords="184,384,19" onclick="openNav(this)" alt="6" />
      </map>
     function openNav(element){
     $('#mySidenav').css("width", "250px");
     $('#image').css("marginLeft", "250px");
     var alt = $(element).attr("alt");
       $('#tname').text(alt);
     }

我有名为“5”和“6”的文件夹,依此类推。 每个文件夹都有1.html 2.html<title>PersonName</title>如果我点击图像地图用alt = 5我想得到'5 / 1.html' <title>值出现在"id=d1"它应该成为该HTML的链接。 尝试了这个,但没有工作,似乎我犯了语法错误

$.get('1.html'), openNav(result){
    var obj = $(result).find('title');
    $(this).append($('#d1').text(obj.html()));

ok changed my code:

      <div class="a" id="mySidenav">
         <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">X</a>
         <a href="#" id="tname">Number:</a>
         <a href="#" id="d1"></a>
         <a href="#" id="d2"></a>
      </div>
      <map class="b" name="mymap" id="map">
         <area shape="circle" coords="67,420,20" onclick="openNav(this)" alt="5" />
         <area shape="circle" coords="184,384,19" onclick="openNav(this)" alt="6" />
      </map>
     function openNav(element){
     $('#mySidenav').css("width", "250px");
     $('#image').css("marginLeft", "250px");
     var alt = $(element).attr("alt");
       $('#tname').text(alt);
     }

i have folders named "5" and "6" and so on. each folders have 1.html 2.html that has <title>PersonName</title> if i clicked image map with alt=5 i want to get '5/1.html' <title> value appear on "id=d1" and it should become link to that html. tried this one, but not working, seems like im making syntax error

$.get('1.html'), openNav(result){
    var obj = $(result).find('title');
    $(this).append($('#d1').text(obj.html()));

原文:https://stackoverflow.com/questions/37588399
2019-09-26 02:44

最满意答案

您可以使用带有.getAttribute("alt")纯JavaScript或带有.attr("alt") jQuery来选择属性。 但是,您需要先选择正确的元素。 您可以使用带有$("#map area") jQuery执行此操作。 然而,在函数中直接传递元素更容易。

HTML:

<map class="b" name="mymap" id="map">
   <area shape="circle" coords="67,420,20" onclick="openNav(this)" alt="5" />
   <area shape="circle" coords="184,384,19" onclick="openNav(this)" alt="6" />
</map>

JavaScript的:

function openNav(element) {
   var alt = element.getAttribute("alt");
   document.getElementById("tname").innerHTML = alt;
}

// or with jQuery
function openNav(element) {
   var alt = $(element).attr("alt");
   $("#tname").text(alt);
}

编辑后问题的答案:

正确的解决方案是在区域上设置单击侦听器。 在这个clicklistener中,你可以像这样创建整个逻辑。

首先,从HTML文档中删除每个onclick=""

然后,使用此JavaScript代码段:

$("#map area").click(function() {
    var alt = $(this).attr("alt");
    var address1 = alt + "/1.html";
    var address2 = alt + "/2.html";

    $.get({
        url: address1,
        success: function(result) {
            var title = $.parseHTML(result).find("title").text();
            $("#d1").text(title).attr("href", address1);
        }
    });
    $.get({
        url: address2,
        success: function(result) {
            var title = $.parseHTML(result).find("title").text();
            $("#d2").text(title).attr("href", address2);
        }
    });
});

当然有改进的余地(例如DRY概念等)。


You can select the attribute with plain JavaScript with .getAttribute("alt") or with jQuery with .attr("alt"). However, you need to select the correct element first. You can do this e.g. with jQuery with $("#map area"). It is however easier to pass the element directly by in the function.

HTML:

<map class="b" name="mymap" id="map">
   <area shape="circle" coords="67,420,20" onclick="openNav(this)" alt="5" />
   <area shape="circle" coords="184,384,19" onclick="openNav(this)" alt="6" />
</map>

JavaScript:

function openNav(element) {
   var alt = element.getAttribute("alt");
   document.getElementById("tname").innerHTML = alt;
}

// or with jQuery
function openNav(element) {
   var alt = $(element).attr("alt");
   $("#tname").text(alt);
}

The answer for the question after your edit:

The proper solution would be to set a click listener on the area. Inside of this clicklistener, you create the whole logic, like this.

First, remove every onclick="" from your HTML document.

Then, use this JavaScript snippet:

$("#map area").click(function() {
    var alt = $(this).attr("alt");
    var address1 = alt + "/1.html";
    var address2 = alt + "/2.html";

    $.get({
        url: address1,
        success: function(result) {
            var title = $.parseHTML(result).find("title").text();
            $("#d1").text(title).attr("href", address1);
        }
    });
    $.get({
        url: address2,
        success: function(result) {
            var title = $.parseHTML(result).find("title").text();
            $("#d2").text(title).attr("href", address2);
        }
    });
});

There is of course room for improvements (e.g. DRY concept etc.).

2016-06-02

相关问答

更多

在角度,如何使用取消用户事件的美元间隔,如页面更改?(In angular, how to use cancel an $interval on user events, like page change?)

每当用户更改页面时,与路由控制器相关联的范围(下面示例中的/page1 )都将发送一个$destroy事件 。 您可以在该事件的侦听器中cancel $interval : app.config(function ($routeProvider) { $routeProvider.when('/page1', { template: '<div>Page Content</div>', controller: PageController

Visual Studio 2008>禁用应用程序调试(Visual Studio 2008 > Application debugging disabled)

解决了。 在我的解决方案中有: 一个网站 一个专案 另一个项目 又一个项目 该网站有一个“又一个项目”的dll,但它是手动复制的,该网站没有引用“又一个项目”。 所以我修改了“又一个项目”的来源,从那时起我就无法调试了。 解决方案:我删除了DLL并添加了对“又一个项目”的引用,现在我可以附加w3wp.exe并使用调试器。 Solved. In my Solution there are: a web site a project another project yet another proje

如何在使用ng选项的select中使用ng-class(How to use ng-class in select with ng-options)

您可以创建一个指令,在处理ngOptions指令后处理选项,并使用相应的类更新它们。 更新 :旧的代码有一些错误,自从我回答这个问题后,我学到了一些东西。 这是一个在1.2.2中重做的Plunk(但也应该在1.0.X中工作) 这里更新了代码: app.directive('optionsClass', function ($parse) { return { require: 'select', link: function(scope, elem, attrs, ngSel

选择哪个存储引擎比较合适

MySQL有多种存储引擎,每种存储引擎有各自的优缺点,可以择优选择使用:   MyISAM、InnoDB、MERGE、MEMORY(HEAP)、BDB(BerkeleyDB)、EXAMPLE、FEDERATED、ARCHIVE、CSV、BLACKHOLE。   MySQL支持数个存储引擎作为对不同表的类型的处理器。MySQL存储引擎包括处理事务安全表的引擎和处理非事务安全表的引擎:   · MyISAM管理非事务表。它提供高速存储和检索,以及全文搜索能力。MyISAM在所有MySQL配置里被支持

在eclipse中强制转换泛型类但在javac中出错(Casting generic class is warning in eclipse but error in javac)

有没有一种解决方法可以在两个编译器上进行编译? Class<? extends List<String>> clazz; // casting to interim type clazz = (Class<? extends List<String>>) (Class<? extends List>) ArrayList.class; // raw types ....... clazz = (Class) ArrayList.class; 然而! 此代码值得解释为什么它可以工作以及何时可能不

SQL语句insert into 。。。value。。。什么时候用value什么时候用values,两者有区别吗?

不能用value,只能用values。 value()是对XML数据执行XQuery,并返回 SQL 类型的值。

如何在C ++中实现垃圾收集(How to implement garbage collection in C++)

C和C ++中的垃圾收集都是困难的主题,原因如下: 指针可以是整型的类型,反之亦然。 这意味着我可以有一个内存块,只能通过使用整数,将其类型转换为指针,然后取消引用它才可以访问。 一个垃圾收集器必须小心,不要认为一个块是不可达的,当确实仍然可以达到。 指针不透明。 许多垃圾收集器,如停止和复制收集器,喜欢移动内存块或压缩它们以节省空间。 由于您可以明确地查看C和C ++中的指针值,这可能难以正确实现。 你必须确保,如果有人正在做一些棘手的类型转换为整数,如果你移动了一块内存,你正确地更新整数。

如何通过avconv合并视频?(How to merge videos by avconv?)

avconv -i concat:file1.mp4\|file2.mp4 -c copy output.mp4 我不知道是否适用于任何容器类型(用AVI为我工作)。 avconv -i concat:file1.mp4\|file2.mp4 -c copy output.mp4 I don't know if works with any container's type ( worked for me with AVI ).

最新问答

更多

在角度,如何使用取消用户事件的美元间隔,如页面更改?(In angular, how to use cancel an $interval on user events, like page change?)

每当用户更改页面时,与路由控制器相关联的范围(下面示例中的/page1 )都将发送一个$destroy事件 。 您可以在该事件的侦听器中cancel $interval : app.config(function ($routeProvider) { $routeProvider.when('/page1', { template: '<div>Page Content</div>', controller: PageController

OS X Server - bot无法从存储库获取源代码(OS X Server - bot can't get source from repository)

我已经用最令人费解的方式解决了这个问题! 当OS X Server连接到存储库以下载源代码时,它将使用Xcode库。 Xcode使用libgit2进行下载,该下载有一个已知的导致缓冲区错误的错误。 它已在v0.21.2中修复,但最新的Xcode(6.1.1)仅使用v0.21。 之前的Xcode版本只使用v0.20,所以希望未来的Xcode版本将使用v0.21.2 +,在这种情况下,此修复不应该是必需的。 无论如何,Xcode 6.1.1的解决方案是: 从这里下载并解压Xcode使用的gitlib

Visual Studio 2008>禁用应用程序调试(Visual Studio 2008 > Application debugging disabled)

解决了。 在我的解决方案中有: 一个网站 一个专案 另一个项目 又一个项目 该网站有一个“又一个项目”的dll,但它是手动复制的,该网站没有引用“又一个项目”。 所以我修改了“又一个项目”的来源,从那时起我就无法调试了。 解决方案:我删除了DLL并添加了对“又一个项目”的引用,现在我可以附加w3wp.exe并使用调试器。 Solved. In my Solution there are: a web site a project another project yet another proje

如何在使用ng选项的select中使用ng-class(How to use ng-class in select with ng-options)

您可以创建一个指令,在处理ngOptions指令后处理选项,并使用相应的类更新它们。 更新 :旧的代码有一些错误,自从我回答这个问题后,我学到了一些东西。 这是一个在1.2.2中重做的Plunk(但也应该在1.0.X中工作) 这里更新了代码: app.directive('optionsClass', function ($parse) { return { require: 'select', link: function(scope, elem, attrs, ngSel

选择哪个存储引擎比较合适

MySQL有多种存储引擎,每种存储引擎有各自的优缺点,可以择优选择使用:   MyISAM、InnoDB、MERGE、MEMORY(HEAP)、BDB(BerkeleyDB)、EXAMPLE、FEDERATED、ARCHIVE、CSV、BLACKHOLE。   MySQL支持数个存储引擎作为对不同表的类型的处理器。MySQL存储引擎包括处理事务安全表的引擎和处理非事务安全表的引擎:   · MyISAM管理非事务表。它提供高速存储和检索,以及全文搜索能力。MyISAM在所有MySQL配置里被支持

电脑术语hudson 是什么意思

Hudson是Jenkins的前身,是基于Java开发的一种持续集成工具,用于监控程序重复的工作,包括: 1、持续的软件版本发布/测试项目。 2、监控外部调用执行的工作。 Hudson的特性 1、易于安装-只要把hudson.war部署到servlet容器,不需要数据库支持。 2、易于配置-所有配置都是通过其提供的web界面实现。 3、集成RSS/E-mail/IM-通过RSS发布构建结果或当构建失败时通过实时通知。 4、生成JUnit/TestNG测试报告。 5、分布式构建支持-Hudson能

在eclipse中强制转换泛型类但在javac中出错(Casting generic class is warning in eclipse but error in javac)

有没有一种解决方法可以在两个编译器上进行编译? Class<? extends List<String>> clazz; // casting to interim type clazz = (Class<? extends List<String>>) (Class<? extends List>) ArrayList.class; // raw types ....... clazz = (Class) ArrayList.class; 然而! 此代码值得解释为什么它可以工作以及何时可能不

SQL语句insert into 。。。value。。。什么时候用value什么时候用values,两者有区别吗?

不能用value,只能用values。 value()是对XML数据执行XQuery,并返回 SQL 类型的值。

如何学好宏观经济学呢

学好宏观经济学:   第一步,预习。学的时候必须要亲自画图和推导。   第二步,理清思路,注意逻辑性。从核算到决定都是为IS-LM做铺垫,然后财政和货币政策是应用,然后AD-AS是延伸,然后是开放模型。   第三步,听好课,一定要复习和多做习题。   宏观经济学(Macroeconomics),是使用国民收入、经济整体的投资和消费等总体性的统计概念来分析经济运行规律的一个经济学领域。宏观经济学是相对于古典的微观经济学而言的。宏观经济学是约翰·梅纳德·凯恩斯的《就业、利息和货币通论》发表以来快速发