使用jQuery通过divID名称使用变量

Question

我有一个带有ID的

，当点击时会打开一个新的

，这很好，但我真正想要的是基于点击的

的ID，“填充”新的

的预定义文本。例如：

<div class="infobox" id="help_msg1">Click me</div>

我可能有三个（实际上更多但是...）这样的div。

这个打开：

<div id="helpbox">text in here</div>

在我的 .js 页面中，我有文档准备好等等，然后：

var help_msg1 ='这是一个帮助信息的文本'; var help_msg2 ='这是另一个帮助信息的文本'; var help_msg3 ='这是另一个帮助信息的文本';

然后：

$('.infobox').live('click',function() {
 $('#helpbox').remove();
 $('label').css({'font-weight': '400'});
 $(this).next('label').css({'font-weight': '900'});
 var offset = $(this).next().next().offset();
 var offsetby = $(this).next().next().width();
 var leftitby = offset.left+offsetby+10;

$('body').append('在此输入文本'); $('#helpbox').css( { 'left': leftitby, 'top': offset.top } ); });

请注意，在添加新的#helpbox之前，我会删除每个旧的#helpbox，而.next().next()则是确定适当的文本输入的标识符，这些都可以正常工作。

我的问题是：当单击id="help_msg1"时，如何将var help_msg1添加到追加中；当单击id="help_msg2"时，则添加var help_msg2等。我已经尝试过了。

- Russell Parrott

Answer 1

一种方法是使用jQuery的data()功能将帮助信息与<div>元素关联：

$(document).ready(function() {
    $("#help_msg1").data("help_msg", "text that is a help message");
    $("#help_msg2").data("help_msg", "text that is another help message");
    // etc...
});

稍后您可以直接从单击的<div>元素中获取消息。

$(".infobox").live("click", function() {
    // ...
    $("body").append($(this).data("help_msg"));
});

- Frédéric Hamidi

---

@Scorpi0 - 我每天都从你们这些人身上学到新东西。对于一个“新手”来说，Jquery/Java 就像 PHP 一样，有许多不同的解决问题的方法，大多数都“没有错”，只是有些更好，比如高效等。我喜欢这个 .data 函数，但在我能够正确实现它之前，我需要再多读一些资料——我正在学习 JQ。 - Russell Parrott

Answer 2

定义一个将元素ID映射到消息的数组。

var messages = new Array;
messages['help_msg1'] = 'text that is a help message';

然后，修改您的点击处理程序以包含此内容，以便决定要附加的文本：

var id = $(this)[0].id;
if(typeof(messages[id]) != 'undefined'){
     $('body').append(messages[id]);
}else{
     alert('no message for id '+id);
}

- Macy Abbey

---

谢谢你，经过一些修改（也许更多是我编写jQuery函数的基本风格 :-) ），现在可以正常工作了。再次感谢。 - Russell Parrott

JavaScript的Array仅支持数字键。当您添加具有字符串键的属性时，您得到的是一个Array，其length与其所有内容和成员的总和不匹配。如果您使用字符串键，则应使用Object（您可以使用文字语法创建它们：{}表示Object，[]表示Array）。 - eyelidlessness

@eyelidlessness - 我不太确定你的意思（我只是在学习），但我认为我明白了，这就是我所说的“几个修改”的意思。这种方式运作良好：var id = $(this).attr('id'); - $('body').append('<div id="helpbox">'+messages[id]+'</div>'); - Russell Parrott

@Russell，抱歉我的评论是针对Macy的。SO可能已经更改了其通知功能，因为我没有直接在我的评论中加上@ Macy前缀，所以它也通知了您。我是在评论Macy使用Array而不是Object。 - eyelidlessness

Answer 3

我会尝试类似这样的东西

$('.infobox').live('click',function(event) {
    var text = eval(event.target.id);
    ...
}

- Joril