"/>

如何获取所选图像映射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

最新问答

更多

Angular自定义指令调用另一个自定义指令(Angular custom directive calling another custom directive)

工作代码: var app = angular.module('plunker', []); app.controller('productController', function($scope) { }); app.directive("hideShow", function() { return { templateUrl: "hideshow.html" }; }); app.directive("tmHtml", function() { return

如何通过参数将文本解析并附加到SQL Server 2005中的存储过程(How to Parse and Append text to a stored procedure in SQL Server 2005 via a parameter)

有一些选择。 您可以使用INFORMATION_SCHEMA.ROUTINES中的元数据更改实际的SP(不是我认为您想要做的事情) 您可以参数化SP - 如果SP直接使用变量而不动态生成SQL,则不应该容易受到注入。 您可以考虑使用视图或内联或多步表值函数,它可以像参数化视图一样使用(内联更高效) - SELECT * FROM udf_Test WHERE TestCol1 = 'Test' 。 您可以获取SP的结果并将它们放在临时表或表变量中并对其进行查询。 There are some o

OpenCV中心Homography(OpenCV Center Homography)

通常很容易使图像居中; 您只需创建一个用零填充的较大矩阵(或任何您想要的颜色),并在中心定义一个与图像大小相同的ROI,并将其放在那里。 但是,您通常无法使用两个图像执行此操作。 问题是,如果图像被移动或旋转,使其部分位于目标图像边界之外,那么来自warpPerspective返回的扭曲图像将在这些边界处被切断。 您需要做的是创建填充图像,在任意位置插入未扭曲的图像,并通过向这些像素添加平移来修改变换(在本例中为单应性)。 例如,如果您的居中图像在填充图像中的左上角为(400,500) ,那么您

如何在linux shell脚本中计算日期-N?(How to calculate date -N in linux shell scripting?)

var=`date +%s`; date=`date --date=@$var +%Y-%m-%d` echo $date 您可以添加/减去您需要的日期。 只记得它是在几秒钟内 从手册页: 自1970-01-01 00:00:00 UTC以来的%s秒 将纪元(1970-01-01 UTC)之后的秒数转换为日期 $ date --date ='@ 2147483647' 编辑:devNull提供了更好的答案 var=`date +%s`; date=`date --date=@$var +

如何使用Devise创建用户配置文件?(How Do I Create a User Profile With Devise?)

听起来您希望用户在创建帐户的同时更新其个人资料? 如果是这样,您可以使用用户模型设置关联的配置文件模型。 使用accepts_nested_attributes_for您可以在设计用户注册提交/创建时为嵌套模型创建记录。 这是一个很好的截屏,涵盖嵌套模型,我也建议你搜索其他设计相关的SO帖子,因为此问题已经讨论过。 有一种替代方法,更容易实现 - 只允许注册用户编辑/更新其配置文件。 这样您就不必更改Devise视图,并且可以通过单独的非设计控制器设置各种CRUD操作。 投入一个访问控制列表(A

清理模式以管理树上的多步异步过程(Clean pattern to manage multi-step async processes on a tree)

这是一个更新版本,它遍历节点树,处理初始根节点中的每个子节点,然后递归地下降到每个子节点的树中并处理其子节点,依此类推。 这是一个jsfiddle演示 // Pass the root node, and the callback to invoke // when the entire tree has been processed function processTree(rootNode, callback) { var i, l, pending; // If ther

场景的角色(Role of the Scene)

cocos2d中存在CCScene的唯一原因是因为CCDirector需要它作为runWithScene和replaceScene等方法的基类。 除此之外,CCScene,CCLayer和CCNode几乎完全相同。 您可以为场景,图层,节点,精灵等提供所需的任何角色。 但是,通常场景承担当前活动游戏对象(节点)的状态管理器的角色。 一个常见的用例是将场景声明为单例,以便任何子节点都可以访问场景的基本方法,例如发送其他不相关的节点消息,或者检查游戏是否结束,等等。 对于传播事件我赞成传递事件,因为

组件中的Angular 2组件[重复](Angular 2 Component In Component [duplicate])

<ng-content></ng-content>指令解决了我的问题。 <div class="modal-body"> <ng-content></ng-content> </div> <ng-content></ng-content> directive is solved my problem. <div class="modal-body"> <ng-content></ng-content> </div>

jsPlumb draggable element javascript函数(jsPlumb draggable element javascript function)

你错过了jsPlumb.setContainer($("body")); https://jsfiddle.net/mkaran/mLthybzo/ https://jsplumbtoolkit.com/community/doc/home 编辑:你的例子的小提琴https://jsfiddle.net/mkaran/aof6mq34/ You are missing the jsPlumb.setContainer($("body")); https://jsfiddle.net/mkaran

MVC4:ViewModel(带有radiobuttonlist)在HttpPost之后为空(MVC4: ViewModel (with radiobuttonlist) is empty after HttpPost)

我没有看到表单有如下ID的映射: @Html.HiddenFor(model => model.Id) 每个内部问题集合也应该具有Id,以便与表单一起发布。 因此,对于您可以拥有的每个问题,在表单的foreach循环中: @Html.HiddenFor(model => item.Question.Id) 该模型还具有MultipleChoiceQuestion类型的集合。 对于模型绑定到集合,集合元素的名称应具有带有序数字的name属性,如本文http://haacked.com/arch