CODEWITHSUNDEEP
jquery
krispykim
krispykim

Reputation: 329

Showing a class element

<div class= "movies">
    <div class= "movie-tools pull-right rd-region">
        <span class="rd-main" style="display: none;">Release Date: 
            <span class="releaseDate-View">2014-09-25</span>
            <a href="#" class="update-releaseDate"><img src="assets/images/_.gif" class="icon ic_b_edit"></a>
        </span>
        <span class="rd-data-tool">
        <input type="text" class="datepicker hasDatepicker" id="dp1413878193903"> 
        <span class="sched-ea-tool"> 
            <a class="submit-updated-release" href="#"><img src="assets/images/_.gif" class="icon submit-updated-sched "></a>
            <a class="cancel-update-release" href="#"><img src="assets/images/_.gif" class="icon ic_s_cancel"></a>
        </span>
        </span>
    </div>
</div>

JQUERY:

$('.rd-region').on('click', '.cancel-update-release',function() {
        var $this = $(this);
        $this.closest('.rd-data-tool').hide();
        $this.parent().sibling('.rd-main').show();
});

I'm having problems with showing the rd-main class because by default, its hidden. But when the user clicks the cancel-update-release class, the rd-main class should be shown and the rd-data-tool should be hidden (that's what the jquery code should do).

The $this.closest('.rd-data-tool').hide(); works fine but the $this.parent().sibling('.rd-main').show(); doesn't. I think, it's not pointing to the correctly. Can anyone help me?

Upvotes: 0

Views: 51

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388316

because rd-main is not a sibling of the parent(sched-ea-tool) of cancel-update-release, it is the sibling of rd-data-tool so

$('.rd-region').on('click', '.cancel-update-release', function() {
  $(this).closest('.rd-data-tool').hide().siblings('.rd-main').show();;
});
.rd-main {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class= "movies">
  <div class= "movie-tools pull-right rd-region">
    <span class="rd-main" style="display: none;">Release Date: 
      <span class="releaseDate-View">2014-09-25</span>
      <a href="#" class="update-releaseDate"><img src="assets/images/_.gif" class="icon ic_b_edit"/></a>
    </span>
    <span class="rd-data-tool">
      <input type="text" class="datepicker hasDatepicker" id="dp1413878193903"/> 
      <span class="sched-ea-tool"> 
        <a class="submit-updated-release" href="#"><img src="assets/images/_.gif" class="icon submit-updated-sched "/></a>
        <a class="cancel-update-release" href="#"><img src="assets/images/_.gif" class="icon ic_s_cancel"/></a>
      </span>
    </span>
  </div>
</div>

Upvotes: 2

Master Slave
Master Slave

Reputation: 28519

Think its the matter of an typo in sibling = siblings function

$this.closest('.rd-data-tool').hide().siblings('.rd-main').show();

Upvotes: 1

Related Questions