Jquery 使用1函数使用ID淡入多个div

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

因此，他们点击一个链接：

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

我需要做的是多次这样做，以便在一个页面上有多个链接，当单击时，显示正确的div

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

---

谢谢

假设您可以在ID中为

div

元素提供淡入淡出的ID，这应该会起作用（在

a

元素的

href

属性中传递ID引用）：

---

假设链接和图像都具有彼此相似的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" />

将所有的

标记都赋给伪css类（例如ClassName1）

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

$(document).ready(function(){

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

---

将div的id维护为ImageID\u视图的地方非常有用。我还想在用户单击div后淡出它（即，他们单击以显示，然后单击div以再次隐藏它）。我怎么能这么做？

<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();
        });
    });
});

$(document).ready(function(){

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