removing clicked-on selector from a selector class

Forum Moderators: open

Message Too Old, No Replies

removing clicked-on selector from a selector class

sssweb

1:07 pm on Jun 14, 2013 (gmt 0)

I have the following HTML:

<div class="clicks" id="id1" onclick="clickable(this)">
<div class="clicks" id="id2" onclick="clickable(this)">
<div class="clicks" id="id3" onclick="clickable(this)">
etc...

with function clickable(el) {...}

In the function, I want to select all divs with class "clicks" EXCEPT the one that triggered the function.

I've tried:
$(".clicks").not(el)....
$(".clicks").not(this)....
and also:
var ID = $("#" + el.id);
$(".clicks").not(ID)....

None work; I had this working in the past and can't figure out what I changed to make it fail.

sssweb

1:23 pm on Jun 14, 2013 (gmt 0)

Hmmm...starting to think something else is wrong; I tried:

$(el).removeClass(".clicks");
$(".clicks").hide();
$(el).addClass(".clicks");

I assume that should work, but it didn't. Any idea what could be going on? Everything else in the function works fine using $(el)....

sssweb

1:29 pm on Jun 14, 2013 (gmt 0)

Okay, before anyone racks their brain over this, I discovered some peculiar behavior while testing -- will re-post when I figure out what's going on.

sssweb

2:18 pm on Jun 14, 2013 (gmt 0)

I tracked down the culprit. It turns out the method DOES work. It's just that the action I want to perform is to fade out all the other "clicks" classes. This used to work fine, but I've since tweaked my HTML so that each div includes a style class defined as:

display: inline-block !important;

This prevents it from hiding (I can perform any other action on the divs and it works fine. Using say, fadeOut(1000), it even fades for a second, then comes right back). The culprit is the !important tag -- it works fine if I remove it.

Any comments on why jQuery wouldn't override this? Aside from dumping the tag (which may not be an issue), any solutions?

Readie

7:47 pm on Jun 14, 2013 (gmt 0)

!important is a nasty piece of work - you should avoid it where possible because of the very reason you are now yourself seeing. The only thing that will overwrite an !important rule is another !important rule with a stronger selector.

Anyway, while the correct approach to this problem is to restructure your CSS to remove the need for the !important rule, the following snippet of code should solve your immediate problem.

<html lang="en">
 <head>
 <style type="text/css">
 .clicks {
 display: inline-block !important;
 }
 </style>
 </head>
 <body>
 <div class="clicks" onclick="clickable(this);">Test click</div>
 <div class="clicks" onclick="clickable(this);">Test click</div>
 <div class="clicks" onclick="clickable(this);">Test click</div>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
 <script type="text/javascript">
 (function($) {
 $.fn.impFadeOut = function() {
 var duration = (typeof arguments[0] == 'number')? parseInt(arguments[0]) : 1000;
 var callback = (typeof arguments[1] == 'function')? arguments[1] : function() {};
 var stepLength = 25; // 0.025 second intervals
 
 return this.each(function() {
 var element = $(this);
 var step = 1;
 var maxSteps = Math.ceil(duration / stepLength);
 
 var opacityPerStep = 100 / maxSteps;
 opacityPerStep = opacityPerStep;
 
 var baseStyleString = $(this).attr('style');
 if(!baseStyleString) {
 baseStyleString = '';
 }
 baseStyleString = baseStyleString.replace(/;\s*$/, '').replace(/^\s*;\s*/, '') + ';'
 
 var stepFunc;
 stepFunc = function() {
 step += 1;
 if(step == maxSteps) {
 element.attr({
 'style': baseStyleString + 'display: none !important;'
 });
 callback();
 return;
 }
 var opacityThisStep = opacityPerStep * step;
 opacityThisStep = String(100 - Math.round(opacityThisStep));
 var ffOpacityThisStep = opacityThisStep;
 if(ffOpacityThisStep.length == 1) {
 ffOpacityThisStep = '0' + ffOpacityThisStep;
 }
 
 var opacityStyle = 'opacity: 0.' + ffOpacityThisStep + ';';
 opacityStyle += '-ms-opacity: 0.' + ffOpacityThisStep + ';';
 // I'd like to take this opportunity to say how much I hate old IE
 opacityStyle += '-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=' ;
 opacityStyle += opacityThisStep + ')";';
 opacityStyle += 'filter: alpha(opacity=' + opacityThisStep + ');';
 
 element.attr({
 'style': baseStyleString + opacityStyle
 });
 
 window.setTimeout(stepFunc, stepLength);
 };
 stepFunc();
 });
 };
 })(jQuery);
 
 function clickable() {
 $('.clicks').not(arguments[0]).impFadeOut(2000);
 }
 </script>
 </body>
</html>

Tested on Firefox 21.0, Chrome 27.0, Opera 12.14, IE 10, IE 10(compat:8), IE 10(compat:7), Safari 5.1

[edited by: whoisgregg at 8:03 pm (utc) on Jun 14, 2013]
[edit reason] Fixed sidescroll :) [/edit]

sssweb

7:58 pm on Jun 14, 2013 (gmt 0)

Wow -- thanks for taking the time to work that out & post it. I see what you mean about !important -- was testing it out for other specs and it does the same for each: jQuery won't override it.

Can't say I like that, but I guess this issue is resolved.

Readie

11:08 pm on Jun 14, 2013 (gmt 0)

You're welcome :) Your problem piqued my interest and I kinda enjoy working with jQuery and CSS - don't get to do it often enough at work :)