0

I'm trying to make a script that allows me to click on one div and that click triggers click on another. This another element is outside and nowhere near this first element.

Biggest problem is, elements i want to trigger click on have no unique classes or ids.

Here is code, its wp so this code is generated, there are the elements i want to target with the click, the ones i;m clicking have unique ids #one #two #three etc..:

<div class="swiper-slide" style="width: 356.6px;" data-slide-number="1" data-swiper-slide-index="1"></div>
<div class="swiper-slide" style="width: 356.6px;" data-slide-number="2" data-swiper-slide-index="2"></div>
<div class="swiper-slide" style="width: 356.6px;" data-slide-number="3" data-swiper-slide-index="3"></div>
<div class="swiper-slide" style="width: 356.6px;" data-slide-number="4" data-swiper-slide-index="4"></div>

As you can see only unique identifiers are data-slide-number and data-swiper-slide-index

And i dont know how to targer these custom identifiers with jquery.

Here is the jquery im trying to work with:

$(document).on('click', '#one', function(event) { 
    event.preventDefault(); 
    $("data-slide-number="1").click(); 
});

Is it possible to target this custom identifier ?

Thank you

EDIT:

Here's how the code looks now, clicks are registered but target elemts are not affected and i dont know why:

<script>
var $=jQuery.noConflict();

$(document).on('click', '#jedna', function(event) {
    console.log($(this).html());
    $('[data-slide-number="0"]').click(); 
});


$(document).on('click', '#dva', function(event) {
    console.log($(this).html());
    $('[data-slide-number="1"]').click(); 
});


$(document).on('click', '#tri', function(event) {
    console.log($(this).html());
    $('[data-slide-number="0"]').click(); 
});

$(document).on('click', '#styri', function(event) {
    console.log($(this).html());
    $('[data-slide-number="3"]').click(); 
});


$(document).on('click', '#pat', function(event) {
    console.log($(this).html());
    $('[data-slide-number="4"]').click(); 
});

$(document).on('click', '#sest', function(event) {
    console.log($(this).html());
    $('[data-slide-number="4"]').click(); 
});

$(document).on('click', '#sedem', function(event) {
    console.log($(this).html());
    $('[data-slide-number="6"]').click(); 
});

$(document).on('click', '#osem', function(event) {
    console.log($(this).html());
    $('[data-slide-number="7"]').click(); 
});

$(document).on('click', '#devat', function(event) {
    console.log($(this).html());
    $('[data-slide-number="8"]').click(); 
});

$(document).on('click', '#desat', function(event) {
    console.log($(this).html());
    $('[data-slide-number="9"]').click(); 
});


$(document).on('click', '#jedenast', function(event) {
    console.log($(this).html());
    $('[data-slide-number="10"]').click(); 
});

document.querySelectorAll('[data-slide-number]').forEach(item => {
  item.addEventListener('click', event => {
    console.log(item.getAttribute("data-slide-number"));
  })
})
</script>
Martin Sprušanský
  • 111
  • 9
  • Your "data-slide-number="1" is off. Mismatched ". – Arundeep Chohan Sep 10 '20 at 19:32
  • 4
    Does this answer your question? [Selecting element by data attribute](https://stackoverflow.com/questions/2487747/selecting-element-by-data-attribute) – ikiK Sep 10 '20 at 19:32
  • Use the attribute selector []: $('[data-slide-number="1"]').click(); – wawawoom Sep 10 '20 at 19:33
  • Thanks, i was looking for attribute selector, didnt know what is is called. – Martin Sprušanský Sep 10 '20 at 20:25
  • But sadly its still not working, here is the code: do you have any idea where can be the problem ? Both elements are not next or indide each other – Martin Sprušanský Sep 10 '20 at 20:26
  • It does work, you are doing something wrong again... https://jsfiddle.net/ikiK_Cro/y8ebt5vr/9/ – ikiK Sep 11 '20 at 11:06
  • @ikiK yes, it works in fiddle, dont know why not on site, if you have time, you can take a look at it here: http://www.sajdikyapartments.sk/ elements im clicking on are the houses exactly in the middle of the page, and data-slide-number elemets are the tabs in section above that. That houses in the picture have divs on top of them when you hover them and those are elements to click on. They just have different ids on site "jedna" instead of "one", "dva" instead of "two" etc thanks a lot – Martin Sprušanský Sep 11 '20 at 11:37
  • @ikiK Thanks, i fixed errors, put it before closing body tag and added var $=jQuery.noConflict(); at the beginning of script since i found out that jquery in wordpress cant start with $(document) and that is solution, console shows no errors and i see it registers clicks but its not affecting the tabs so still not working and i have no other idea why :/ – Martin Sprušanský Sep 11 '20 at 12:02
  • It is cose elements that you are invoking click on with `data-slide-number` does not have event listeners attach on them. If you inspect source, only parent div with id `eventklikacka_swiper` has js click on it, and that is part of the some kind of plugin that has code `function(e) { y.allowClick || (y.params.preventClicks && e.preventDefault(), y.params.preventClicksPropagation && y.animating && (e.stopPropagation(), e.stopImmediatePropagation())) }` with I don't know what it does. – ikiK Sep 11 '20 at 12:07
  • Witch is strange cose we added event listener by `document.querySelectorAll('[data-slide-number]').forEach(item => {` that should console log it at least.... – ikiK Sep 11 '20 at 12:12
  • Is it possible to add event listeners to **data-slide-number** elements? Sorry for all the questions, js is my weakest part – Martin Sprušanský Sep 11 '20 at 12:12
  • Is it possible that **var $=jQuery.noConflict();** at the beginning on the script is preventing event listeners to be added and creating some problem ? – Martin Sprušanský Sep 11 '20 at 12:14
  • Sorry cant help you like this. I did manage to attach event on those tabs with console but even then the slide wont move. Like I said this is part of `swiper.js` plug in that has event on `eventklikacka_swiper` that does the rest, and I can not go into that now. Sorry. – ikiK Sep 11 '20 at 12:23
  • Its ok, thanks a lot for everything, you were really helpful, now i atleast know where exactly is the problem and can go from here :) – Martin Sprušanský Sep 11 '20 at 12:26

0 Answers0