jquery显示/隐藏div中没有​​硬编码的内容

Question

I have 3 divs, there is content(images) inside of them. When you click on one of them content of it becomes visible and content of other two becomes hidden. I've been managed to achieve that with jquery code(you can check for it below), but the bad thing it's hardcoded, is there any other methods do do it?

PS: " https://solomia-gera.github.io/ " is the site itself if you want to have a look.

---------------------------------------------------------THE CODE-----------------------------------------------------

<!-- 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

Given that all three have a common class mox , and if you add a common class content to each of the content divs you can do this:

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

Explanation: the function is called whenever you click on any element with a mox class. this selector lets you select the particular instance of the class that was clicked, children() selects any child elements and when we put a selector as an argument for children() , it selects all child elements that match that selector. Second line works similarly, with an addition of not(this) , so the second line reads hide all elements that match content class and are children of any element with class mox , but this one.

EDIT: If for some reason you do not want to assign a common class to all content divs, the following function will work as is:

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

Here I used attributeStartsWith selector, read more here .

Answer 2

There is much better way for doing this You can simply use the following code

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

Codepen link

Answer 3

if your content is outside mox , you can apply a same class for each element and add a data for show only what you want.

 $(".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 4

try this code

  $('.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 5

Based on your code:

 function myCustomHide(contentIds, moxsIds){ contentIds.forEach(function(element, index) { index !== 0 ? $("#"+element).hide(): null; moxsIds.forEach(function(moxElem, moxIndex){ if(index !== moxIndex){ $("#"+moxElem).on("click", function(){ $("#"+element).hide(); }); } }); $("#"+moxsIds[index]).on("click", function(){ $("#"+element).show(); }); }); } 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> 

or check the fiddle for slight different html: https://jsfiddle.net/oy7vj7fq/2/