CODEWITHSUNDEEP
jquery
Tony Tambe
Tony Tambe

Reputation: 573

jQuery .removeClass Not Working

This probably won't be very hard for more experienced jQuery users, but I've been stumped. I have sets of divs on a page that are related. #vendor-1 & #vendor-1-content, #vendor-2 & #vendor-2-content, etc.

When the user clicks on #vendor-1, it add the class .is-visible to the #vendor-1-content. They can then click an "x" that will "close" the content by removing the .is-visible class. This is my code which works fine for just one div:

$('#vendor-1').click(function(){
  $('#vendor-1-content').addClass('is-visible');
});

$('#close').click(function(){
  $('.vendor-content').removeClass('is-visible');
});

I added the following code so that whichever id the user clicks, the corresponding content id gets the class .is-visible. The issue is that the #close portion only works on vendor-1-content. All of the other divs open properly, but won't close when clicked.

$(function (){
  $('[id^=vendor-]').click(function (){
    var num = this.id.split('vendor-')[1];
    var vendorId = '#vendor-' + num + '-content';

    $(vendorId).addClass('is-visible');

    $('#close').click(function() {
      $(vendorId).removeClass('is-visible');
    });
  });
});

What am I doing wrong in order to make the .is-visible be removed from the content class?

My html looks like this for each:

<div class="col-xs-12 col-sm-6 col-md-4 vendor-card" id="vendor-1">
    <img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=0099ff&txtclr=ffffff&txt=300%C3%97300&w=300&h=300&fm=png" alt="">
    <div class="vendor-info">
      <h3>Vendor Name</h3>
      <p>Short Vendor Description</p>
    </div>
  </div>

<div class="vendor-content" id="vendor-1-content">
<div>
  <h2>Vendor title here</h2>
  <em>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, ullam.</em>
  <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus. 
  </p>
</div>
<a href="#0" class="close-content cd-img-replace" id="close">close</a>
</div>

Here is a codepen example of the code: http://codepen.io/Tambe257/pen/mPaZvw

Upvotes: 0

Views: 3210

Answers (2)

kapantzak
kapantzak

Reputation: 11750

Check this example:

$(document).on('click', '[id^=vendor-]:not(.content)', function() {
  $('.content').removeClass('is-visible');
  $('[id="vendor-' + $(this).attr('id').split('-')[1] + '-content"]').addClass('is-visible');
});

$(document).on('click', '.closeContent', function(e) {
  console.log($(this).closest('.content').attr('id'));
  $(this).closest('.content').removeClass('is-visible');
});
.content:not(.is-visible) { display:none }
.content {
   padding:5px;
   bacground-color:#e1e1e1;
   border:1px solid #d8d8d8;
}
.closeContent { cursor:pointer;color:red;margin-left:10px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="vendor-1">Vendor #1</div>
<div id="vendor-2">Vendor #2</div>
<div id="vendor-3">Vendor #3</div>
<div id="vendor-1-content" class="content"><span>Vendor #1 content</span><span class="closeContent">x</span></div>
<div id="vendor-2-content" class="content"><span>Vendor #2 content</span><span class="closeContent">x</span></div>
<div id="vendor-3-content" class="content"><span>Vendor #3 content</span><span class="closeContent">x</span></div>

Upvotes: 0

Diego Polido Santana
Diego Polido Santana

Reputation: 1435

I changed a little your logic, check this out:

  <a class="vendor-click" data-id="1" href="javascript:void(0)">Vendor 1</a>
  <a class="vendor-click" data-id="2" href="javascript:void(0)">Vendor 2</a>
  <a class="vendor-click" data-id="3" href="javascript:void(0)">Vendor 3</a>
  <br/>
  <div id="vendor-content-1" class="vendor-content">content 1</div>
  <div id="vendor-content-2" class="vendor-content">content 2</div>
  <div id="vendor-content-3" class="vendor-content">content 3</div>
  <br/>
  <br/>

  <a id="close" data-id="1" href="javascript:void(0)">Close</a>

and the JS:

  $(".vendor-content").hide();

  $("#close").on("click", function() {
    $(".vendor-content").hide();
  });

  $(".vendor-click").on("click", function() {
    var id = $(this).data("id");
    $(".vendor-content").hide();
    $("#vendor-content-" + id).show();
  });

Plunker: https://plnkr.co/edit/o9YFZ1KUvcVzGAvjn21L

Upvotes: 1

Related Questions