1

我不太喜欢使用 javascript 和 jQuery，所以请添加详细的答案。

我需要为div同一个类的不同s添加一个jQuery效果，这样当我点击一个1带有类的div时item，另一个divinfo会出现在特定的容器中。
此外，如果我单击2具有相同 class 的itemdiv ，另一个 divpics将出现在同一个容器中，info而 whileinfo将消失。

我打算用这个：

$(document).ready(function(){
    $("#box1").click(function(){
        $("#box1").fadeOut(250);
    });
    $("#box1").click(function(){
        $("#box2").fadeIn(500);
    });
});

但这对于使用大约 10 divs 和另外 10 个显示和隐藏divs 是无效的。
我会使用很多行代码，但我不确定它是否会起作用。

4

4 回答 4

1

您可以使用选择器$(".item")来获取div您感兴趣的所有 s。

类选择器听起来像你需要的： http: //api.jquery.com/class-selector/

一旦您在点击调用中并采取不同的操作，您就可以区分这些 ID。但是类选择器将允许您在您感兴趣的所有 div 上使用 click 事件处理程序。

下面的示例代码

$(document).ready(function(){
    $(".item").click(function(e){
        // output the id of the clicked item
        console.log($(e.target).attr("id"));

        if($(e.target).attr("id")=="box1"){
            //do something for if the clicked item is box1.
            $("#box1").fadeOut(250);
            $("#box2").fadeIn(500);            
        }

    });
});
于 2012-12-20T22:28:13.140 回答
0

使用 jQuery 进行选择时，您需要使用 #id_name 作为 ID，使用 .class_name 作为类。选择 div, tr, td, ... 时，名称前不需要特殊符号。所以：

$('#id_name').click(); // click on every item of the ID 'id_name'
$('.class_name').hide(); // make all items invisible that have class 'class_name'
$('tr').addClass('class_name'); // adds the class 'class_name' to all tr items

ID 是唯一的。类可以出现不止一次。

只需阅读jQuery API上的示例

为了上手 JS jQuery 非常好。做起来非常快，但不要忘记 jQuery 是一个必须加载的库，才能使这些短命令成为可能。纯javascript会更快。别忘了，你可以把 JS 和 jQuery 结合起来，因为 jQuery 就是 JS。切换到纯 JS 也会让你看到你的脚本到底做了什么。

于 2012-12-20T22:41:46.533 回答
0

没有你的 html，很难说清楚。但是，这是一个起点。

您现有的 jQuery 就是这样，它通过 ID 获取每个 div。

$(document).ready(function(){
    $("#box1").click(function(){
        $("#box1").fadeOut(250);
    });
    $("#box1").click(function(){
        $("#box2").fadeIn(500);
    });
});

一种改进是使用类而不是 ID，您可以这样做。

注意：itempic下面假设您为要触发图片显示的 div分配不同的类或附加类：

$(document).ready(function(){
    $(".item").click(function(){
        $(".info").fadeOut(250);
    });
    $(".itempic").click(function(){
        $(".pics").fadeIn(500);
    });
});

如果您有多个具有相同功能的 div（例如，您有一堆产品，每个产品都有一个信息框和一个图片框），那么您需要使用“包含”给定项目的选择器。使用一些示例 HTML，我可以提供一个考虑到这一点的答案。

于 2012-12-20T22:31:22.187 回答
0

与此类似的 html 结构

<div id="container">
   <div id="info">info contents</div>
   <div id="pic">pic contents</div>
</div>

<div class="item" data-related="#info">your contents</div>
<div class="item" data-related="#pic">your contents</div>
..etc.

并使用

$(function(){
    $('#container').children().hide(); // initial hiding 

    $('.item').click(function(){
        var relatedId = $(this).data('related');
        $(relatedId).show().siblings().hide();
    });
});

演示在 http://jsfiddle.net/gaby/mTSZv/

于 2012-12-20T22:36:16.017 回答