/    Sign up×
Community /Pin to ProfileBookmark

If pressing is done before and after

Guys, tell the noob. There is such a construction:

`<div class=”p-nav-inner”>
<button role=”button” class=”owl-dot”></button>
<button role=”button” class=”owl-dot active”></button>
<button role=”button” class=”owl-dot”></button>
<button role=”button” class=”owl-dot”></button>
</div>`

It is necessary that when the button is pressed before “owl-dot active”, one event occurs, and when the button is pressed “after” another event occurs!

There can be many buttons, but the “active” class is dynamic!

Thanks!

to post a comment
CSSHTMLJavaScript

8 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumSep 09.2020 — Please tell us some details about the context of this construction. Should "one event" and "other event" always be the same for each button?
Copy linkTweet thisAlerts:
@etherealauthorSep 09.2020 — @Sempervivum#1623138

These are slider navigation buttons, here's an example:

[https://owlcarousel2.github.io/OwlCarousel2/demos/autowidth.html](https://owlcarousel2.github.io/OwlCarousel2/demos/autowidth.html)
Copy linkTweet thisAlerts:
@SempervivumSep 09.2020 — When reading "owl" I already suspected that it's the owl carousel :-)

And what about my second question?
>Should "one event" and "other event" always be the same for each button?
>
Or

first button -> event one or two

third button -> event three or four

and so on.
Copy linkTweet thisAlerts:
@SempervivumSep 09.2020 — PS: Seems to me I misunderstood your intention. Should the event be like this:
&lt;div class="p-nav-inner"&gt;
&lt;button role="button" class="owl-dot"&gt;&lt;/button&gt; &lt;!-- event 1 (before) --&gt;
&lt;button role="button" class="owl-dot active"&gt;&lt;/button&gt;
&lt;button role="button" class="owl-dot"&gt;&lt;/button&gt; &lt;!-- event 2 (after) --&gt;
&lt;button role="button" class="owl-dot"&gt;&lt;/button&gt; &lt;!-- event 2 (after) --&gt;
&lt;/div&gt;
Copy linkTweet thisAlerts:
@etherealauthorSep 09.2020 — @Sempervivum#1623141

Yes that's right

For all buttons before the class "active" one event.

For all buttons after class "active" another event.
Copy linkTweet thisAlerts:
@SempervivumSep 09.2020 — Try this javascript:
&lt;script&gt;
$('.p-nav-inner button').on('click', event =&gt; {
if (!$(event.target).hasClass('active')) {
if ($(event.target).nextAll('.active').length &gt; 0
) {
console.log('before');
// actions for button before pressed
} else {
console.log('after');
// actions for button after pressed
}
}
});
&lt;/script&gt;
Copy linkTweet thisAlerts:
@etherealauthorSep 09.2020 — @Sempervivum#1623143

Thank you so much. Everything is working!
Copy linkTweet thisAlerts:
@SempervivumSep 09.2020 — You're welcome!
×

Success!

Help @ethereal spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 3.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,
)...