在列表中打开单个项目的弹出窗口

Question

我可以帮您进行翻译。以下是您需要翻译的内容：

我有一个项目列表。但我只展示其中的一个样例代码。

我有以下HTML代码：

<div id="starpline_timestamp_refer" title="Refer your friends" style="margin-left:10px;"><a class="refer_freinds" id="39342" href="javascript:void(0);">Refer your friends</a></div>

<div class='strapline_share_buttons' style='display:none;'>".elgg_view("addthis/extend", $vars)."</div>

这段文字重复了十次，但是每个按钮都有不同的id，例如id="39342"。当我点击“推荐给朋友”按钮时，所有项目的strapline_share_buttons都会打开，所以我需要只显示一个项目。

我的jQuery代码：

$("a.refer_freinds").click(function(){
        var item_id =  $(this).attr("id"); 
        //$( ".strapline_share_buttons").toggle();
        $(this).$( ".strapline_share_buttons").toggle();
        });
        $(".strapline_share_buttons").popup("open", {
            "transition": "pop"
        });

那么如何做到这一点？

- UI Dev

---

$(this).$( ".strapline_share_buttons").toggle(); 这是什么意思.. 去掉 $。 - Balachandran

不能将其删除，否则它就无法工作。 - UI Dev

Answer 1

如果我正确理解了问题和HTML布局，这段代码应该可以工作。

$("a.refer_freinds").click(function () {
    var item_id = $(this).attr("id");
    //go to parent and next element in DOM and show that
    //<div class='strapline_share_buttons' style='display:none;'>".elgg_view("addthis/extend", $vars)."</div>

    $(this).parent().next().show()
        .popup("open", {
        "transition": "pop"
    });
});

http://jsfiddle.net/9H9jq/2/

- Magistr_AVSH

---

好的，它运行良好，但我们是否可以再次切换，如果在框外单击或在框内单击？？框指先前切换的框... - UI Dev

可以将 $(this).parent().next().show() 更改为 $(this).parent().next().toggle()，这样我们点击元素时就会切换到 <a> 链接。 - Magistr_AVSH

例如，可以添加此事件侦听器$(this).parent().next().click(function(){$(this).hide();}); 当单击该元素时，隐藏此<div>。 - Magistr_AVSH

不，我们需要使用鼠标抬起功能...无论如何感谢您的努力和时间...这里将接受您的第一个答案... - UI Dev

@Magistr_AVSH，在这个例子中，您会如何做到“引荐您的朋友”仅显示实际的推荐号码？我的意思是，如果有其他显示的推荐号码，则与显示自己的推荐号码同时关闭它们？谢谢您的帮助。 - AdamK