Question

我并不是真的使用javascript和jQuery，所以请添加详细的答案。

我需要将jQuery效果添加到具有相同类的不同div，以便当我点击带有1的div item时，另一个div {{1}将出现在特定的容器中另外，如果我点击具有相同课程info的div 2，则另一个div item将显示在与pics相同的容器中，而info将消失。

我打算用这个：

info

但这对于使用大约10 $(document).ready(function(){ $("#box1").click(function(){ $("#box1").fadeOut(250); }); $("#box1").click(function(){ $("#box2").fadeIn(500); }); });和另外10个显示和隐藏div来说无效。
我会使用很多行代码，我不确定它是否会起作用。

Answer 1

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

类选择器听起来像你需要的：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);            
        }

    });
});

Answer 2

没有你的HTML，很难准确说出来。但是，这是一个起点。

你现有的jQuery是这样的，它抓住ID的每个div。

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

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

注意：以下假设您为要触发显示图片的div指定了不同的类或其他类itempic：

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

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

Answer 3

构建与此类似的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/

Answer 4

使用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也可以让你看到你的脚本究竟做了什么。

如何对具有相同类的不同div使用相同的JQuery效果

4 个答案: