如何使用相同的JQuery效果爲不同的div與同一類

我並不真的在使用JavaScript和jQuery，所以請添加詳細的答案。如何使用相同的JQuery效果爲不同的div與同一類

我需要一個jQuery效果添加到不同的div s的同一類，所以，當我在一個div 1點擊與item類，另一個DIV info將出現在一個特定的容器。
此外，如果我點擊具有相同類item的div 2，則另一個div pics將出現在與info相同的容器中，而info將消失。

我打算用這樣的：

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

但是，這並不適用於使用約10 div S和其他10顯示和隱藏div秒。
我會使用很多代碼行，我不確定它會起作用。

來源

2012-12-20 Marwan Ossama

向我們展示您的html示例。那麼我們可以讓你朝着正確的方向指出更容易的方向。 –

將元素存儲在變量中以節省大量時間。 –

你必須打電話和理解Jquery選擇器。 – SaidbakR

你可以使用選擇$(".item")讓所有的div是你有興趣

類選擇聽起來像你所需要的：http://api.jquery.com/class-selector/

一旦你裏面你可以區分IDS點擊通話並採取不同的行動。但類選擇都會讓你使用點擊事件處理程序上的所有你感興趣的div。

示例代碼的下方

$(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-20 22:28:13 zer0bit

沒有你的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-20 22:31:22

這可以做很多行 –

結構你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-20 22:36:16

您的解決方案似乎是最好的，但它並沒有爲我工作！我完成了你所做的，它沒有工作！注意：我已將文本放在帶有「item」類的div中，並放置在標記中，並將「item」div排列在「ul」列表中。 –

沒關係我解決了這個問題，謝謝你真的幫助我:) –

當使用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-20 22:41:46

如何使用相同的JQuery效果爲不同的div與同一類

回答

相關問題