jquery在沒有硬編碼的情況下顯示/隱藏div的內容

Question

我有3個div，裏面有內容（圖片）。當你點擊其中一個內容時，它變得可見，另外兩個內容變得隱藏。我已經設法通過jQuery代碼來實現這一點（你可以在下面檢查它），但是它是硬編碼的壞事，還有其他方法可以嗎？

P.S .:「https://solomia-gera.github.io/」是網站本身，如果你想看看。

---------------------------------------------- - - - - - -代碼 - - - - - - - - - - - - - - - - - - - ----------------

<!-- Hide/Show DIV1 content--> 
<script> 
// Hide content in div with id#mox when cliked on div with id#content 
    $("#mox2").on("click", function() { 
    $("#content1").hide(); 
    }); 
    $("#mox3").on("click", function() { 
    $("#content1").hide(); 
    }); 
// Show content in div with id#mox when cliked on div with id#content 
    $("#mox1").on("click", function() { 
    $("#content1").show(); 
    }); 
</script> 

<!-- Hide/Show DIV2 content--> 
<script> 
    $("#content2").hide(); 
// Hide content in div with id#mox when cliked on div with id#content 
    $("#mox1").on("click", function() { 
    $("#content2").hide(); 
    }); 
    $("#mox3").on("click", function() { 
    $("#content2").hide(); 
    }); 
// Show content in div with id#mox when cliked on div with id#content 
    $("#mox2").on("click", function() { 
    $("#content2").show(); 
    }); 
</script> 

<!-- Hide/Show DIV3 content--> 
<script> 
$("#content3").hide(); 
// Hide content in div with id#mox when cliked on div with id#content 
$("#mox2").on("click", function() { 
$("#content3").hide(); 
    }); 
$("#mox1").on("click", function() { 
$("#content3").hide(); 
}); 
    // Show content in div with id#mox when cliked on div with id#content 
$("#mox3").on("click", function() { 
$("#content3").show(); 
}); 

Answer 1

考慮到三者有一個共同的類mox，如果你添加一個普通類content每個內容的divs你可以這樣做：

$(".mox").click(function() { 
    $(this).children(".content").show(); 
    $(".mox").not(this).children(".content").hide(); 
} 

說明：函​​數i只要你點擊任何帶有mox類的元素，就會調用它。 this選擇器讓你選擇被點擊的類的特定實例，children()選擇任何子元素，當我們將選擇器作爲參數children()時，它選擇與該選擇器匹配的所有子元素。第二行的作用類似，另外還有not(this)，所以第二行的內容隱藏了與content類匹配的所有元素，並且是類mox中的任何元素的子元素，但是這是其中的一個。

編輯：如果由於某種原因，你不想一個共同的類分配給所有內容的div，下面的函數將工作是：

$(".mox").click(function() { 
    $(this).children("[id^=content]").show(); 
    $(".mox").not(this).children("[id^=content]").hide(); 
} 

在這裏，我用attributeStartsWith選擇，read more here。

Answer 2

如果您的內容不在mox之內，則可以爲每個元素應用相同的類並添加數據以僅顯示您想要的內容。

$(".mox").on("click", function() { 
 
    var content = $(".content") 
 
    content.hide(); 
 
    content.eq($(this).attr("data-content")-1).show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="mox" data-content="1">Show one</div> 
 
<div class="mox" data-content="2">Show two</div> 
 
<div class="mox" data-content="3">Show three</div> 
 

 
<div class="content" style="display:none;width:100px;height:100px; background:red" ></div> 
 
<div class="content" style="display:none;width:100px;height:100px; background:blue" ></div> 
 
<div class="content" style="display:none;width:100px;height:100px; background:green" ></div>

Answer 3

試試這個代碼

$('.mox').on('click', function(){ 
 
     $('.image_list').hide(); 
 
     var $index = $('.mox').index(this); 
 
     $('.image_list').eq($index).show(); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <div class="box"> 
 
     <div id="mox1" class="mox"> 
 
     <p class="hide"> 
 
     O<br>V<br>E<br>R<br>V<br>I<br>E<br>W 
 
     </p> 
 
      <div id="content1" class="image_list"> 
 
     <img src="https://solomia-gera.github.io/img/1.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/2.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/3.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/4.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/5.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/6.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/7.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/8.jpg"> 
 
      </div> 
 
     </div> 
 

 
    <!-- ALBUMS --> 
 
     <div id="mox2" class="mox"> 
 
     <p class=""> 
 
     A<br>L<br>B<br>U<br>M<br>S 
 
     </p> 
 
      <div id="content2" class="image_list"> 
 
    <img src="https://solomia-gera.github.io/img/1.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/2.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/3.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/4.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/5.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/6.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/7.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/8.jpg"> 
 
      </div> 
 
     </div> 
 

 
    <!-- ABOUT --> 
 
     <div id="mox3" class="mox"> 
 
     <p class=""> 
 
     A<br>B<br>O<br>U<br>T 
 
     </p> 
 
      <div id="content3" class="image_list"> 
 
      <img src="https://solomia-gera.github.io/img/1.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/2.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/3.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/4.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/5.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/6.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/7.jpg"> 
 
      <img src="https://solomia-gera.github.io/img/8.jpg"> 
 
      </div> 
 
     </div> 
 

 
    </div>

Answer 4

有這樣做的 您可以簡單地使用下面的代碼更好的方法

$('.content').on('click', '.img-heading', function(){ 
    $(this).parent('.content').siblings('.content').removeClass('active'); 
    $(this).parent('.content').addClass('active'); 
}) 

Codepen link

Answer 5

基於您的代碼：

function myCustomHide(contentIds, moxsIds){ 
 
\t contentIds.forEach(function(element, index) { 
 
\t \t index !== 0 ? $("#"+element).hide(): null; 
 
\t \t moxsIds.forEach(function(moxElem, moxIndex){ 
 
     if(index !== moxIndex){ 
 
     $("#"+moxElem).on("click", function(){ 
 
      $("#"+element).hide(); 
 
     }); 
 
     } 
 
\t }); 
 
    $("#"+moxsIds[index]).on("click", function(){ 
 
      $("#"+element).show(); 
 
    }); 
 
\t }); 
 
} 
 

 
var contentsIds = [ "content1", "content2", "content3"]; 
 
var moxsIds = [ "mox1", "mox2", "mox3"]; 
 

 
myCustomHide(contentsIds, moxsIds);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> 
 
     <div id="mox1"> 
 
      Overview 
 
     </div> 
 
     <div id="content1" class="image_list"> 
 
     <img src="https://solomia-gera.github.io/img/1.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/2.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/3.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/4.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/5.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/6.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/7.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/8.jpg"> 
 
     </div> 
 

 
    <!-- ALBUMS --> 
 
     <div id="mox2"> 
 
     Albums 
 
     </div> 
 
     <div id="content2" class="image_list"> 
 
     <img src="https://solomia-gera.github.io/img/1.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/2.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/3.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/4.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/5.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/6.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/7.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/8.jpg"> 
 
     </div> 
 
     
 

 
    <!-- ABOUT --> 
 
     <div id="mox3"> 
 
     About 
 
     </div> 
 
     <div id="content3" class="image_list"> 
 
     <img src="https://solomia-gera.github.io/img/1.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/2.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/3.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/4.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/5.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/6.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/7.jpg"> 
 
     <img src="https://solomia-gera.github.io/img/8.jpg"> 
 
     </div> 
 
     
 

 
    </div>

或檢查搗鼓略有不同的HTML：https://jsfiddle.net/oy7vj7fq/2/