CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user5295866
user5295866

Reputation:

How do I reuse the same function for both ids and classes?

My current code works but effects all of the elements instead of just the one I want. I've tried this with classes and ids so I don't think that's the issue.

What I'm expecting is that my Javascript will only effect the selected element, not all of them. Here's a demo.

HTML

<div class="mainPageDiv">
    <div class="dashBoardContainer">
        <div class="dbContainer1 column">
            <div class="flip">
                <div class=" card">
                    <div class="face front">
                        <div class=" portlet   ">
                            <div class="portlet-header"> <span class="red text-uppercase"> edit button works</span>

                                <div class="dropdown pull-right "> <span class="pull-right ">
                            <span class=""  id="edit-changes"><a href="#" > Edit <span class="glyphicon glyphicon-pencil pull-right flipLink" > </span> 
                                    </a>
                                    </span>
                                    </span>
                                    <hr class="hrflipForm">
                                </div>
                                <!-- portlet-content -->
                            </div>
                            <div class="portlet-content lastViewedArticle ">
                                <br>text
                                <br>text
                                <br>text
                                <br>text
                                <br>text
                                <br>text
                                <br>text
                                <br>text</div>
                            <!-- portlet-header -->
                        </div>
                        <!-- portlet- -->
                    </div>
                    <!-- moveOnchange-->
                    <div class="face back">
                        <div class="inner">
                            <div class="portlet">
                                <div class="flipForm">
                                    <ul class="list-inline pull-right ">
                                        <li class="flipControl" id="save-changes"> <span class="pull-right glyphicon glyphicon-floppy-disk gi-1x opacity7 "></span>

                                        </li>
                                    </ul>
                                </div>
                                <!-- Header Closed -->
                                <div class="portlet-content lastViewedArticle ">
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text</div>
                                <!--- Portlet content -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- dbContainer1 -->
        </div>
        <div class="dbContainer2 column">
            <div class="flip">
                <div class=" card">
                    <div class="face front">
                        <div class=" portlet   ">
                            <div class="portlet-header"> <span class="red text-uppercase">  edit button doesn't works</span>

                                <div class="dropdown pull-right "> <span class="pull-right ">
                            <span class=""  id="edit-changes"><a href="#" > Edit <span class="glyphicon glyphicon-pencil pull-right flipLink" > </span> 
                                    </a>
                                    </span>
                                    </span>
                                </div>
                                <!-- portlet-content -->
                            </div>
                            <div class="portlet-content lastViewedArticle ">
                                <br>text
                                <br>text
                                <br>text
                                <br>text
                                <br>text
                                <br>text
                                <br>text
                                <br>text</div>
                            <!-- portlet-header -->
                        </div>
                        <!-- portlet- -->
                    </div>
                    <!-- moveOnchange-->
                    <div class="face back">
                        <div class="inner">
                            <div class="portlet">
                                <div class="flipForm">
                                    <ul class="list-inline pull-right ">
                                        <li class="flipControl" id="save-changes"> <span class="pull-right glyphicon glyphicon-floppy-disk gi-1x opacity7 "></span>

                                        </li>
                                    </ul>
                                </div>
                                <!-- Header Closed -->
                                <div class="portlet-content lastViewedArticle ">
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text</div>
                                <!--- Portlet content -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- dbContainer2 -->
        </div>
    </div>

Javascript

$('#edit-changes').on('click', function () {
    $('.back').css('transform', 'rotateY(0deg)');
    $('.front').css('transform', 'rotateY(180deg)');
});

$('#save-changes').on('click', function () {
    $('.front').css('transform', 'rotateY(0deg)');
    $('.back').css('transform', 'rotateY(180deg)');
});

$(function () {
    $(".column").sortable({
        connectWith: ".column",
        handle: ".portlet-header",
        cancel: ".portlet-toggle",
        placeholder: "portlet-placeholder ui-corner-all"
    });

    $(".portlet")
        .addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
        .find(".portlet-header")
        .addClass("ui-widget-header ui-corner-all");

    $(".portlet-toggle").click(function () {
        var icon = $(this);
        icon.toggleClass("ui-icon-minusthick ui-icon-plusthick");
        icon.closest(".portlet").find(".portlet-content").toggle();
    });
});

Upvotes: 1

Views: 185

Answers (2)

user5295866
user5295866

Reputation:

So I have found the solution :

I just changed to this :

  $('.edit-changes').on('click', function () {

      $(this).closest('.flip').find('.back').css('transform', 'rotateY(0deg)');
      $(this).closest('.flip').find('.front').css('transform', 'rotateY(180deg)');
  });

  $('.save-changes').on('click', function () {
      $(this).closest('.flip').find('.front').css('transform', 'rotateY(0deg)');
      $(this).closest('.flip').find('.back').css('transform', 'rotateY(180deg)');
  });

from 

  $('.edit-changes').on('click', function () {

      $('.back').css('transform', 'rotateY(0deg)');
      $('.front').css('transform', 'rotateY(180deg)');
  });

  $('.save-changes').on('click', function () {
      $('.front').css('transform', 'rotateY(0deg)');
      $('.back').css('transform', 'rotateY(180deg)');
  });

I just need to find the closest parent of edit and save.

Working demo

Upvotes: 1

Glubus
Glubus

Reputation: 2855

First of all you should not use the same id's for multiple elements on the same page, use the class attribute for that (like you suggest yourself).

You can access the element that has been clicked by doing

var element = $(this)

For more information regarding these kind of keywords in events like this read this

What you're doing now is finding all elements that have the class 'back' and 'front' and applying your transformations on them.

If you need an element 'close' to the element that has been clicked, use the function foo.closest('.back'), which returns the closest element found by the passed selector.

Upvotes: 1

Related Questions