是否可以通過點擊使用相同功能的不同元素來切換不同的div？

Question

說我有50 div，像這樣：

<div class="btn1"></div> //Toggles the first container to appear 
    <div class="btn2"></div> //Toggles the second container to appear 
    <div class="btn3"></div> //Toggles the third container to appear 

，另有50 div包含的信息，像這樣：

<div class="container-1"><h1>This is the first container</h1></div> 
    <div class="container-2"><h1>This is the second container</h1></div> 
    <div class="container-3"><h1>This is the third container</h1></div> 

是否有可能做出相應div撥動單擊各個按鈕時只有一個功能？我已經讀了一些關於代表團和在父母/兄弟姐妹身上運作的內容，但它似乎只能在打開同一個容器的多個按鈕上工作，而不是每個按鈕打開每個容器。

不知怎的，我不認爲寫一個函數，每格是要走的路。

Answer 1

是有可能。基本上你需要添加到點擊的對象的引用，以便單擊事件會知道怎樣顯示/隱藏

$(function() { 
 
    $('.btn').on('click', function(e) { 
 
    var $dataTarget = $($(this).data('target')); 
 
    $dataTarget.show().siblings('.container').hide(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="btn btn1" data-target=".container-1"></div> //Toggles the first container to appear 
 
<div class="btn btn2" data-target=".container-2"></div> //Toggles the second container to appear 
 
<div class="btn btn3" data-target=".container-3"></div> //Toggles the third container to appear 
 

 

 
<div class="container container-1"> 
 
    <h1>This is the first container</h1> 
 
</div> 
 
<div class="container container-2"> 
 
    <h1>This is the second container</h1> 
 
</div> 
 
<div class="container container-3"> 
 
    <h1>This is the third container</h1> 
 
</div>

這將顯示容器有針對性的，然後將隱藏其他容器。

Answer 2

1. 使用始於選擇^Document here
2. 使用data-*存儲按鈕對應的股利。
3. 選擇data-*然後將其用作選擇顯示

   $('div[class^=container]').hide(); 
    
   $('div[class^=btn]').click(function() { 
    
       $('div[class^=container]').hide(); 
    
       var thisclass = $(this).attr("data-class") 
    
       $('.' + thisclass).show(); 
    
   })

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    
   <div class="btn1" data-class="container-1">1</div> 
    
   <div class="btn2" data-class="container-2">2</div> 
    
   <div class="btn3" data-class="container-3">3</div> 
    
   
    
   <div class="container-1"> 
    
       <h1>This is the first container</h1> 
    
   </div> 
    
   <div class="container-2"> 
    
       <h1>This is the second container</h1> 
    
   </div> 
    
   <div class="container-3"> 
    
       <h1>This is the third container</h1> 
    
   </div>

Answer 3

您可以使用index和eq做到這一點

$("[class*='btn']").click(function(){ 
 
\t $("[class*='container-']").eq($(this).index()-1).toggle(); 
 
})

[class*="btn"]{ 
 
\t width:150px; 
 
\t height:20px; 
 
\t border:2px solid #000; 
 
\t display:inline-block; 
 
\t cursor:pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="btn1"></div> 
 
<div class="btn2"></div> 
 
<div class="btn3"></div> 
 

 
<div class="container-1"> 
 
    <h1>This is the first container</h1> 
 
</div> 
 
<div class="container-2"> 
 
    <h1>This is the second container</h1> 
 
</div> 
 

 
<div class="container-3"> 
 
    <h1>This is the third container</h1> 
 
</div>

Answer 4

你可以使用這樣的事情

$(document).ready(function() { 
    $("div[class^='btn']").each(function() { 
    $(this).click(function() { 
     var str = $(this)[0].className; 
     $(".container-" + str.substring(3, str.length)).toggle(); 
    }); 
    }); 
}); 

找到所有與btn啓動類和應用點擊事件就可以了。 並根據號碼隱藏相應的容器類。

下面是完整的代碼：

$(document).ready(function() { 
 
    $("div[class^='btn']").each(function() { 
 
    $(this).click(function() { 
 
     var str = $(this)[0].className; 
 
     $(".container-" + str.substring(3, str.length)).toggle(); 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="btn1">aaaa</div> //Toggles the first container to appear 
 
<div class="btn2">bbbb</div> //Toggles the second container to appear 
 
<div class="btn3">cccc</div> //Toggles the third container to appear 
 
<div class="container-1"> 
 
    <h1>This is the first container</h1> 
 
</div> 
 
<div class="container-2"> 
 
    <h1>This is the second container</h1> 
 
</div> 
 
<div class="container-3"> 
 
    <h1>This is the third container</h1> 
 
</div>

（來源：小提琴https://jsfiddle.net/fxabnk4o/17/）