0

我需要根据用户点击的内容显示/隐藏多个 div。

所以他们点击了一个链接：

<a href="#" id="image1">Click me to show</a>

然后使用 jQuery 显示 div：

$(document).ready(function(){

    $("#image1").click(function () {
    $("#image1_view").fadeIn();
    return false; 
    e.preventDefault(); 
    });
});

我需要做的是多次执行此操作，因此页面上有多个链接，单击时会显示正确的 div。

如果没有多次复制和粘贴上述代码，有什么更简单的方法呢？如何将链接的 ID 传递给 jQuery，以便它知道要显示哪个 div？

谢谢！

4

3 回答 3

2

假设链接和图像都具有彼此相似的 ID，例如：

<a href="#" id="image1">Click me to show</a>
<a href="#" id="image2">Click me to show</a>
<a href="#" id="image3">Click me to show</a>

<img src="img1.png" id="image1_view" />
<img src="img2.png" id="image2_view" />
<img src="img3.png" id="image3_view" />

等等，你可以这样做：

$(document).ready(function(){
    $('a[id^="image"]').on('click', function(e) {
        e.preventDefault(); 
        $('#'+ this.id +'_view').fadeIn().one('click', function() {
            $(this).fadeOut();
        });
    });
});
于 2013-04-03T15:55:58.127 回答
0

假设您可以div在 ID 中提供要淡入淡出的元素，这应该可以工作（在a元素的href属性中传递 ID 引用）：

$('a.fadeIn').on('click', function(e) {  
    e.preventDefault();
    var the_div = $($(this).attr('href'));
    the_div.fadeIn('fast');
});
于 2013-04-03T15:55:58.073 回答
0

给你所有的<a>标签虚拟 css 类（例如 ClassName1）

编辑代码，使其看起来像：

$(document).ready(function(){

    $(".ClassName1").click(function () {
    $("#" + this.id + "_view").fadeIn();
    return false; 
    e.preventDefault(); 
    });
});

您将 Divs 的 ID 维护为 ImageID_view

于 2013-04-03T15:56:30.397 回答