Question

我需要根据用户点击的内容显示/隐藏多个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。

没有复制＆amp;粘贴上面的代码加载次数，更简单的方法是什么？如何将链接的ID传递给jQuery，以便它知道要显示哪个div？

谢谢！

Answer 1

假设链接和图像的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();
        });
    });
});

Answer 2

假设您可以在ID中对div元素进行淡化，这应该可行（在a元素的href属性中传递ID引用）：

$('a.fadeIn').on('click', function(e) {  
    e.preventDefault();
    var the_div = $($(this).attr('href'));
    the_div.fadeIn('fast');
});

Answer 3

将所有<a>标签设为虚拟css类（例如ClassName1）

编辑代码，使其如下所示：

$(document).ready(function(){

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

您将Div的ID维护为ImageID_view

使用1功能使用ID淡入多个div

3 个答案: