添加preventDefault（）和stopPropagation（）

Question

I am new in coding in general, most especially javascript.

I made a flip div effect. But I noticed that when clicking one .button to trigger the flip effect, all the other divs that are similar in a page are also triggered. So I am trying to add both .preventDefault() and .stopPropagation() when flipping a div, so far its a big FAIL

As a starter, I came up with this code..

$('.insidecontent .button').click(function () {
    $('.insidecontent').addClass('flipped');
    $('.insidecontent').removeClass('unflipped');
});
$('.insidecontent .button-c').click(function () {
    $('.insidecontent').removeClass('flipped');
    $('.insidecontent').addClass('unflipped');
});

Demo here: http://jsfiddle.net/uriri/ke7kqvvk/3/

A friend of mine suggested that I should use .parents() on the current target inside the .click() function. But after reading the jQuery documentation, I am totally lost!

Answer 1

You don't need to stop click event or prevent default. You just need to flip right element. Right not you are adding/removing classes to/from all .insidecontent , while you need to select only parent element of the clicked button:

$('.insidecontent .button').click(function () {
    $(this).closest('.insidecontent').addClass('flipped').removeClass('unflipped');
});
$('.insidecontent .button-c').click(function () {
    $(this).closest('.insidecontent').removeClass('flipped').addClass('unflipped');
});

Demo: http://jsfiddle.net/ke7kqvvk/5/

Or shorter optimized version can be:

$('.insidecontent').find('.button, .button-c').click(function () {
    $(this).closest('.insidecontent').toggleClass('flipped unflipped');
});

Demo: http://jsfiddle.net/ke7kqvvk/6/

Answer 2

preventDefault() and stopPropagation() won't help here. You need to use a selector that's more specific than all the elements with the same class.

 $('.insidecontent .button').click(function () { $(this).closest('.insidecontent').addClass('flipped').removeClass('unflipped'); }); $('.insidecontent .button-c').click(function () { $(this).closest('.insidecontent').removeClass('flipped').addClass('unflipped'); }); 

 .content{ position: relative; background: #ffffff; width:100%; text-align:center; display: -webkit-box; display: -moz-box; display: box; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-box-align: center; -moz-box-align: center; box-align: center; } ._hasdata .insidecontent { position: relative; background: #ffffff; margin-bottom:30px; -webkit-perspective: 1000px; -moz-perspective: 1000px; -o-perspective: 1000; perspective: 1000px; } ._hasdata .insidecontent .front { position: relative; z-index: 900; width: 200px; height: 200px; background: #ededed; -webkit-transform: rotateX(0deg) rotateY(0deg); -moz-transform: rotateX(0deg) rotateY(0deg); transform: rotateX(0deg) rotateY(0deg); } ._hasdata .insidecontent .front .fcontent { position:relative; top:30%; } ._hasdata .insidecontent.flipped .front { z-index: 900; -webkit-transform: rotateX(0deg) rotateY(180deg); -moz-transform: rotateX(0deg) rotateY(180deg); transform: rotateX(0deg) rotateY(180deg); } ._hasdata .insidecontent .back { position: absolute; width: 200px; height: 200px; top: 0; left: 0; z-index: 800; -webkit-transform: rotateX(0deg) rotateY(-180deg); -moz-transform: rotateY(-180deg); transform: rotateX(0deg) rotateY(-180deg); } ._hasdata .insidecontent.flipped .back { z-index: 1000; background: #E7E7E7; -webkit-transform: rotateX(0deg) rotateY(0deg); -moz-transform: rotateX(0deg) rotateY(0deg); transform: rotateX(0deg) rotateY(0deg); } ._hasdata .insidecontent .front, ._hasdata .insidecontent .back { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: all .8s ease-in-out; -moz-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } ._hasdata .insidecontent .button, ._hasdata .insidecontent.flipped .button-c { z-index: 15; display: block; position: absolute; bottom: 0; margin: -30px 20px 20px; opacity: 0; -webkit-transition: opacity .1s linear; -moz-transition: opacity .1s linear; transition: opacity .1s linear; } ._hasdata .insidecontent:hover .button, ._hasdata .insidecontent.flipped:hover .button-c { opacity: 0.8; } ._hasdata .insidecontent.unflipped .button-c { display: none; } ._hasdata .insidecontent.flipped ._lar { height: 100%; } ._hasdata .insidecontent.unflipped .bcontent { display: none; } ._hasdata .insidecontent.flipped .bcontent { top: 30%; position: relative; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content"> <div class="_hasdata"> <div class="insidecontent initalized unflipped"> <div class="front"> <span class="fcontent">FRONT CONTENT<br />HERE</span> <a class="btt button">info</a> </div> <div class="back _lar"> <div class="bcontent">BACK INFO HERE</div> <a class="btt button-c">go back</a> </div> </div> </div> <div class="_hasdata"> <div class="insidecontent initalized unflipped"> <div class="front"> <span class="fcontent">FRONT CONTENT<br />HERE</span> <a class="btt button">info</a> </div> <div class="back _exif"> <div class="bcontent">BACK INFO HERE</div> <a class="btt button-c">go back</a> </div> </div> </div> </div> 

Answer 3

Have you learned about the " this " keyword yet? In a JQuery click handler, $(this) refers to the element that the handler is called on. So, if you put removeClass and addClass methods on $(this) it will only affect that one element. You can traverse using this too... so your code would look like this:

    $('.insidecontent .button').click(function () {
    $(this).parent().find('.insidecontent').addClass('flipped');
    $(this).parent().find('.insidecontent').removeClass('unflipped');
});

$('.insidecontent .button-c').click(function () {
    $(this).parent().find('.insidecontent').removeClass('flipped');
    $(this).parent().find('.insidecontent').addClass('unflipped');
});

you may not even need the find method in your case, but it is better to be explicit.