弹出多个div标签

Question

我试图获取信息(Ajax)并在弹出窗口(jquery或类似的)中显示它，但我的问题是我的页面中有多个div标记。

<div id="1"><a href="#">mouseover detail for id #1</a></div>
<div id="2"><a href="#">mouseover detail for id #2</a></div>
<div id="3"><a href="#">mouseover detail for id #3</a></div>

或

<div><a href="get.php?id=1">mouseover detail for id #1</a></div>
<div><a href="get.php?id=2">mouseover detail for id #2</a></div>
<div><a href="get.php?id=3">mouseover detail for id #3</a></div>

谢谢你的帮助。

Answer 1

为div添加一个类，使您可以编写泛型代码，如..

<div class="someclass" data-id="1"><a href="#">mouseover detail for id #1</a></div>
<div class="someclass" data-id="2"><a href="#">mouseover detail for id #2</a></div>
<div class="someclass" data-id="3"><a href="#">mouseover detail for id #3</a></div>

然后像这样写代码。

var SM=null;
$('.someclass').hover(function(){
    var data=$(this).attr('data-id');

    if(data==null) return;

    var url='get.php?'+data;

    $.get(url,function(response){
         // taken from simplemodal samples page.
         SM = new SimpleModal({"btn_ok":"Alert button"});
         SM.show({
              "title":"Title",
              "contents":response
         });
    },function(){
         // not sure about the close method.
         // probably SM.close() or SM.hide(). If you have worked on it, add it here.
         });
    });