由于我将在多个位置进行此操作,因此我想使其与唯一数据一起使用。

就像代替<a class="snippet_show_answers" href="#">Se svar</a>一样,也许像<a DATA="1" class="snippet_show_answers" href="#">Se svar</a>之类的东西,然后应将其作为我的脚本的一部分运行,以使其仅处理单击的DATA,而不处理所有框。

我的HTML是这样(其中有多个):

<p class="snippet_answers">Svar: 3 - <span class="green"><a class="snippet_show_answers" href="#">Se svar<img src="images/answerarrow.png" alt="answerarrow" height="14" width="13"></a><a class="snippet_hide_answers" href="#" style="display: none;">Skjul svar<img src="images/answerarrow.png" alt="answerarrow" height="14" width="13"></a></span><hr />
    <div class="answers" style="display: none;">
        <p>blablabla</p>
    </div>
</p>


我的JS是这样的:

$('.snippet_show_answers').live("click", function() {
    $('.answers').slideDown("slow");
    $('.snippet_show_answers').fadeOut("slow");
    $('.snippet_hide_answers').fadeIn("slow");
    return false;
});

$('.snippet_hide_answers').live("click", function() {
    $('.answers').slideUp("slow");
    $('.snippet_hide_answers').fadeOut("slow");
    $('.snippet_show_answers').fadeIn("slow");
    return false;
});


希望有人能理解我,因为我以前见过这种方法,但是我不知道它的名称或其他名称。

先谢谢了。

最佳答案

获取对单击项的父元素的引用,然后使用适当的类查找其后代:

$('.snippet_show_answers').live("click", function() {
    var item = $(this).closest(".snippet_answers");
    item.find('.answers').slideDown("slow");
    item.find('.snippet_show_answers').fadeOut("slow");
    item.find('.snippet_hide_answers').fadeIn("slow");
    return false;
});

$('.snippet_hide_answers').live("click", function() {
    var item = $(this).closest(".snippet_answers");
    item.find('.answers').slideUp("slow");
    item.find('.snippet_hide_answers').fadeOut("slow");
    item.find('.snippet_show_answers').fadeIn("slow");
    return false;
});


另外,如果您使用的是最新版本的jQuery,请确保将.live()更改为.on().live()最近已被弃用。

关于javascript - 使其包含唯一数据,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/14167361/

10-11 12:01